Question

我正在使用Redux Thunk示例模板。当我在setData(Object data){ setData((Integer) data); }中调度一个操作，该操作填充我的商店时，将加载数据，但是在呈现页面之后，商店仍然为空。

getInitialProps

static async getInitialProps({ reduxStore }) { await reduxStore.dispatch(fetchCategories()) const categories = reduxStore.getState().programm.categories; console.log('STATE!!!', categories) return { categories } }将正确加载，但是当我检查商店时，类别状态为空。

这是我的商店：

categories

如何使服务器（在import db from '../../api/db' // TYPES export const actionTypes = { FETCH_PROGRAMMS: 'FETCH_PROGRAMMS', FETCH_CATEGORIES: 'FETCH_CATEGORIES' } // ACTIONS export const fetchCategories = () => async dispatch => { const categories = await db.fetchCategories(); console.log('loaded Cate', categories) return dispatch({ type: actionTypes.FETCH_CATEGORIES, payload: categories }) } // REDUCERS const initialState = { programms: [], categories: [] } export const programmReducers = (state = initialState, action) => { switch (action.type) { case actionTypes.FETCH_PROGRAMMS: return Object.assign({}, state, { programms: action.payload }) case actionTypes.FETCH_CATEGORIES: console.log('Payload!', action); return Object.assign({}, state, { categories: action.payload }) default: return state } }中加载的redux状态被延续到客户端？

Answer 1

如果您这样做：

return { categories }

在getInitialProps中，categories应该在客户端的组件props中可用。

它也应该在Redux中可用，这可能会导致问题：

return Object.assign({}, state, {
  categories: action.payload
})

看看这个Object.assign，该函数仅包含2个参数。

我通常的做法：

return {
  ...state,
  categories: action.payload,
};

Answer 2

经过数小时的寻找解决方案后，我似乎发现了我的问题。似乎在创建商店时需要传递initialState。所以代替这个：

export function initializeStore() {
    return createStore(
        rootReducers,
        composeWithDevTools(applyMiddleware(...middleware))
    )
}

我正在这样做，现在可以使用

const exampleInitialState = {}

export function initializeStore(initialState = exampleInitialState) {
    return createStore(
        rootReducers,
        initialState,
        composeWithDevTools(applyMiddleware(...middleware))
    )
}

Redux Store填充在getInitialProps中，但在客户端上为空

2 个答案: