Question

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

但现在，我只能将它分配给设施＆＃34; loading / data＆＃34;并且只需要完全覆盖Root Redux状态。

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

redux state：http://i.imgur.com/URCCZkN.jpg

动作/ 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,
        });
      });
  };

减速器/ index.js

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

export default rootReducer;

减速器/ 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),
    ),
  );

Answer 1

您需要加入FETCH_TODOS_SUCCESS和Header缩减器中的Main操作。

当你组合reducer时，每个reducer的state数据只包含该reducer的段。

例如，您的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缩减器，只从服务器响应中提取加载数据。

如何覆盖Redux中的初始状态

1 个答案: