javascript - 尽管有 initlizedState，React redux 状态在第一次渲染时未定义

Question

Redux 状态在第一次渲染中未定义，我在 reducer 中返回了 initilizedState = {}

store.js

const store = createStore(
    rootReducer,

    compose(
        applyMiddleware(thunk),
        window.devToolsExtension ? window.devToolsExtension() : (f) => f
    )
)

export default store

rootReducer.js

const rootReducer = combineReducers({
    search: searchReducer,
    product: productReducer,
})

export default rootReducer

reducer.js

const initialState = {}
const productReducer = (state = initialState, action) => {
    const { type, payload } = action
    switch (type) {
        case PRODUCTS_ALL:
            console.log('reducer')
            return { ...state, items: payload }
        default:
            return state
    }
}

export default productReducer

action.js

const products = axios.create({
    baseURL: 'http://localhost:8001/api/products',
})
export const allProducts = () => async (dispatch) => {
    console.log('fetching')
    await products.get('/').then((res) => {
        dispatch({
            type: PRODUCTS_ALL,
            payload: res.data,
        })
    })
}

尽管我在 feed 容器中使用了 connect()

Feed.js

function Feed({ allProducts, product }) {
    const [productItems, setProductItems] = useState()
    const [loading, setLoading] = useState(false)

    React.useEffect(() => {
        allProducts()
        console.log(product)
    }, [])

    return (
        
                            
            <div className='feed__content'>
                {loading ? (
                    <Loader
                        type='Oval'
                        color='#212121'
                        height={100}
                        width={100}
                    />
                ) : (
                    <div className='feed__products'>
                        <div className='feed__productsList'>
                             {product.map((product) => {
                                return (
                                    <Product
                                        name={product.name}
                                        image={product.image}
                                        price={product.price}
                                    />
                                )
                            })} 
                        </div>
                        
                    </div>
                )}

        </div>
    )
}

const mapStateToProps = (state) => ({
    product: state.product.items,
})
const mapDispatchToProps = (dispatch) => {
    return {
        allProducts: () => dispatch(allProducts()),
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Feed)

如果你查看控制台上的数据，你会看到未定义，但如果我添加 useEffect 依赖项，它将创建一个循环，其中第一个是未定义的，其余的是我想要的数据。 由于这个问题，当我想用​​ map 渲染产品时，它会抛出一个错误，指出 can't map undefiend 。

如何解决这个问题

Answer 1

Joel Jaimon代码运行良好。

并在我的代码中添加

const initialState = {
  items: []
}

根据@Andrew和product?.map，所以我的代码现在运行良好。