派发操作后 Redux 状态未更新

Question

我的 redux 状态在分派操作后没有正确更新。我正在使用 redux 和 redux-thunk 调用 API 并将其保存到 redux 存储中。我的状态应该保存一个 JSON 文件，因为很多 JSON 文件将被使用，而且 JSON 文件的 none 似乎正在被使用存入商店。问题在底部解释

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

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

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

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 的提取调用正在运行，因为 JSON 文件将显示在控制台中。使用 store.subscribe 和 store.getState，我可以看到商店没有改变，它与 appReducer.js 文件中描述的初始状态保持不变。

例如 appActions.js 文件中的 fetchData 方法。第一次调度是 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 将根据需要更新

派发操作后 Redux 状态未更新

Redux state not being updated after dispatched actions

react-native

redux

redux-thunk