调度操作后 Redux 状态未更新

Question

调度操作后，我的 redux 状态未正确更新。我正在使用 redux 和 redux-thunk 调用 API 并将其保存到 redux 存储中。我的状态应该保存一个 JSON 文件，因为将使用大量 JSON 文件，并且似乎没有任何 JSON 文件存储到存储中。问题在底部解释了

这是我定义动作类型的types.js 文件：

export const FETCHING_REQUEST = "FETCHING_REQUEST";
export const FETCHING_SUCCESS = "FETCHING_SUCCESS";
export const FETCHING_FAILURE = "FETCHING_FAILURE";

下一个文件是我的appActions.js 文件，其中包含应用程序的某些操作。代码中的 cmets 来自另一个我从未删除过的 stackoverflow 问题。

import { FETCHING_SUCCESS, FETCHING_REQUEST, FETCHING_FAILURE } from "./types";

// Actions for the redux store

export const fetchingRequest = () => {
  return {
    type: FETCHING_REQUEST
  };
};

export const fetchingSuccess = json => {
  return {
    type: FETCHING_SUCCESS,
    payload: json
  };
};

export const fetchingFailure = error => {
  return {
    type: FETCHING_FAILURE,
    payload: error
  };
};

// Function will not work in a component
// Maybe the issue is redux
// more likely to be the Fetch not working in this function
export const fetchData = url => {
  console.log("Should enter async dispatch");
  return async dispatch => {
    dispatch(fetchingRequest());
    try{
      let response = await fetch(url);
      let json = await response.json();
      let dispatchChecker = dispatch(fetchingSuccess(json));
      console.log("JSON",json);
      //console.log(JSON.stringify(json, null, 2));
    }catch(error){
      console.log("ERROR",error);
      dispatch(fetchingFailure(error));
    }
  };
};

在应用的组件中被调用时，只应调用fetchData。

appReducer.js 文件

import {
  FETCHING_SUCCESS,
  FETCHING_REQUEST,
  FETCHING_FAILURE
} from "../actions/types";
import * as data from "./../../../../pickerdata.json"; // for debugging issues
import * as sample from "../../../../sampledata.json";
const initialState = {
  isFetching: false,
  errorMessage: "",
  articles: null
};

const appReducer = (state = initialState, action) => {
  switch (action.types) {
    case FETCHING_REQUEST:
      console.log("request from reducer");
      return { ...state, isFetching: true };
    case FETCHING_FAILURE:
      console.log("failure from reducer");
      return { ...state, isFetching: false, errorMessage: action.payload };
    case FETCHING_SUCCESS:
      console.log("success from reducer");
      return { ...state, isFetching: false, articles: action.payload };
    default:
      return state;
  }
};

export default appReducer;

创建商店的index.js

import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
import { Provider } from "react-redux";
import React, { Components } from "react";
import { createStore, applyMiddleware } from "redux";
import appReducer from "./src/data/redux/reducers/appReducer";
import thunk from "redux-thunk";

const store = createStore(appReducer, applyMiddleware(thunk));

store.subscribe(()=> {
  console.log("State Updated", store.getState());
})

console.log("Store", store.getState());
const AppContainer = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

AppRegistry.registerComponent(appName, () => AppContainer);

这是将我的商店连接到组件的代码

    const mapStateToProps = state => {
      return { response: state };
    };

    const mapStateToDispatch = dispatch => ({
      fetchData: url => dispatch(fetchData(url))
    });

    export default connect(
      mapStateToProps,
      mapStateToDispatch
    )(Component);

这里的问题是 redux 状态没有被更新。使用控制台，我知道对 API 的 fetch 调用正在工作，因为 JSON 文件将显示在控制台中。使用store.subscribe 和store.getState，我可以看到存储没有改变，并且它与appReducer.js 文件中描述的初始状态相同。

例如在appActions.js 文件中的fetchData 方法中。第一个 dispatch 是到 fetchingRequest，redux store 应该是这样的

{isFetching: true, errorMessage: "", articles: null }

却是这样

{isFetching: false, errorMessage: "", articles: null }

获取 API 成功后的下一个调度是 fetchingSuccess 操作，redux 存储应如下所示

{isFetching: false, errorMessage: "", articles: JSONfile }

但看起来像这样

{isFetching: false, errorMessage: "", articles: null }

Answer 1

在您的 types.js 文件中：

创建一个新类型 FETCHING_STATUS（例如）

在您的 fetchData 函数中：

替换dispatch(fetchingRequest()); 由

dispatch({type: FETCHING_STATUS, payload: { isFetching: true }});

将dispatch(fetchingSuccess());替换为

dispatch({type: FETCHING_STATUS, payload: {isFetching: false, articles: fetchingSuccess()}});

将dispatch(fetchingFailed());替换为

dispatch({type: FETCHING_STATUS, payload:  {isFetching: false, errorMessage: fetchingFailed()}});

在您的 appReducer.js 中：

import { combineReducers } from "redux";

function fetchingStatusReducer(state = {}, action) {
  switch (action.type) {
    case FETCHING_STATUS:
      return action.payload;
    default:
      return state;
  }
}

export default combineReducers({
  fetchingStatus: fetchingStatusReducer
});

然后 store.getState().fetchingStatus 将根据需要更新