如何覆盖 Redux 中的初始状态答案

【问题标题】：How to overwrite the initial State in Redux如何覆盖 Redux 中的初始状态
【发布时间】：2017-05-21 19:17:06
【问题描述】：

我正在使用后端编写应用程序，我需要在打开应用程序时进行。向条件正确的服务器发出请求。这应该重写整个应用程序状态。

但现在，我只能将其分配给“加载/数据”设施，并且只需要完全覆盖 Root Redux 状态。

来自服务器的响应：http://i.imgur.com/yams0M4.jpg

actions/loading.js

export function fetchTodos(path) {
  return function (dispatch) {
    dispatch({
      type: FETCH_TODOS_REQUEST,
    });
    return axios
      .get(`http://localhost:3000${path}`)
      .then((response) => {
        const { data } = response;
        console.log('data', data);
        dispatch({
          type: FETCH_TODOS_SUCCESS,
          data,
        });
      })
      .catch((error) => {
        const { data } = error.response;
        console.log('data', data);
        dispatch({
          type: FETCH_TODOS_FAILURE,
          error: data,
        });
      });
  };

reducers/index.js

const rootReducer = combineReducers({
  loading,
  Header,
  Main,
  routing: routerReducer,
});

export default rootReducer;

reducers/loading.js

export function loading(state = initialState.loading, action) {
  switch (action.type) {
    case FETCH_TODOS_REQUEST:
      return Object.assign({}, state, {
        isFetching: true,
      });
    case FETCH_TODOS_SUCCESS:
      return Object.assign({}, state, {
        isFetching: false,
        data: action.data.data,
      });
    case FETCH_TODOS_FAILURE:
      return Object.assign({}, state, {
        isFetching: false,
        error: action.error,
      });
    default:
      return state;
  }
}

存储/index.js

function configureStoreProd(initialState) {
  return createStore(rootReducer, initialState);
}

function configureStoreDev(initialState) {
  const middlewares = [
    thunk,
  ];
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const store = createStore(rootReducer, initialState, composeEnhancers(
    applyMiddleware(...middlewares),
    ),
  );

【问题讨论】：

标签： javascript redux redux-thunk

【解决方案1】：

您需要在 Header 和 Main 减速器中挂钩 FETCH_TODOS_SUCCESS 操作。

当您组合减速器时，每个减速器的 state 数据仅包含该减速器的段。

例如，您的 loading 减速器将有权访问您商店的 state.loading 段。要更新商店的 Main 段，您可以执行以下操作：

// reducers/Main.js

export default (state = initialState.Main, action) => {
    switch (action.type) {
        case FETCH_TODOS_SUCCESS:
            const newMainData = action.data.data.main;

            return Object.assign({}, state, newMainData);
        default:
            return state;
    }
}

附带说明，实例化类型变量（例如类对象）只能使用大写变量。

另外，不要忘记更新您的 loading reducer，以便仅从服务器响应中提取加载数据。

【讨论】：