Question

调度动作后，我的redux状态未正确更新。我正在使用ContainerResponse response = await cosmosDatabase.CreateContainerAsync(new Guid().ToString(), "/id"); FeedIterator<ContainerProperties> resultSet = cosmosDatabase.GetContainerQueryIterator<ContainerProperties>(($"select * from c where c.id = \"{response.Container.Id}\"")); FeedResponse<ContainerProperties> queryProperties = resultSet.ReadNextAsync().Result; ContainerProperties containerSettings = queryProperties.Resource.ToList().FirstOrDefault();和redux来调用API并将其保存到Redux存储中。我的状态应该保存JSON文件，原因是将使用大量JSON文件，而且似乎没有JSON文件存储在商店中。该问题在底部进行了解释

这是我的redux-thunk文件，用于定义操作类型：

types.js

下一个文件是我的export const FETCHING_REQUEST = "FETCHING_REQUEST"; export const FETCHING_SUCCESS = "FETCHING_SUCCESS"; export const FETCHING_FAILURE = "FETCHING_FAILURE";文件，其中包含应用程序的某些操作。代码中的注释来自另一个我从未删除过的stackoverflow问题。

appActions.js

在应用程序的组件中被调用时，仅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)); } }; };被调用。

appReducer.js文件

fetchData

在其中创建商店的index.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;

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

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);

这里的问题是redux状态没有被更新。使用控制台，我知道对API的提取调用正在工作，因为JSON文件将显示在控制台中。使用const mapStateToProps = state => { return { response: state }; }; const mapStateToDispatch = dispatch => ({ fetchData: url => dispatch(fetchData(url)) }); export default connect( mapStateToProps, mapStateToDispatch )(Component);和store.subscribe，我可以看到存储没有更改，并且与store.getState文件中描述的初始状态保持不变。

例如在appReducer.js文件的fetchData方法中。第一次派遣到appActions.js，并且redux存储应该看起来像这样

fetchingRequest

但是却是这样

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

成功提取到API之后的下一次调度是{isFetching: false, errorMessage: "", articles: null }操作，并且redux存储应该看起来像这样

fetchingSuccess

但是看起来像这样

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

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状态未更新

1 个答案: