在redux中分派多個動作會復制狀態引數

我使用了創建的兩個動作和它們各自的減速器。當我調度任何單個動作時，兩個動作的初始狀態都被保存到狀態引數被復制的狀態。

動作/ index.js

import { COUNTER_CHANGE, UPDATE_NAVIGATION } from "../constants";

export function changeCount(count) {

  return {
    type: COUNTER_CHANGE,
    payload: count,
  };
}

export function updateNavigation(obj) {

  return {
    type: UPDATE_NAVIGATION,
    payload: obj,
  };
}

減速器.js

import { COUNTER_CHANGE, UPDATE_NAVIGATION } from "../constants";
import logger from "redux-logger";

const initialState = {
  count: 0,
  navigation: {},
};

export const countReducer = (state = initialState, action) => {

  switch (action.type) {
    case COUNTER_CHANGE:
      return {
        ...state,
        count: action.payload,
      };

    default:
      return state;
  }
};

export const updateNavigation = (state = initialState, action) => {

  switch (action.type) {
    case UPDATE_NAVIGATION:
      return {
        ...state,
        navigation: action.payload,
      };
    default:
      return state;
  }
};
// export default countReducer;

減速器/ index.js

import { countReducer, updateNavigation } from "../reducers/countReducer";
import { combineReducers } from "redux";

const allReducers = combineReducers({
  countReducer,
  updateNavigation,
});

export default allReducers;

調度動作

componentDidMount = () => {
    const { navigation } = this.props;
    this.props.updateNavigation(navigation);
};

const mapDispatchToProps = (dispatch) => {
  return { ...bindActionCreators({ changeCount, updateNavigation }, dispatch) };
};

正如我們在這里看到的，我只觸發了 updateNavigation 操作。但它在 redux 狀態下使用重復引數更新狀態，如下所示

預期的 o/p 將是

countReducer : {count : 0} updateNavigation : {navigation :{}}

uj5u.com熱心網友回復：

每個減速器的狀態形狀不正確。請參閱定義狀態形狀檔案并嘗試以下操作：

export const countReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case COUNTER_CHANGE:
      return {
        ...state,
        count: action.payload,
      };

    default:
      return state;
  }
};

export const updateNavigation = (state = { navigation: {} }, action) => {
  switch (action.type) {
    case UPDATE_NAVIGATION:
      return {
        ...state,
        navigation: action.payload,
      };
    default:
      return state;
  }
};

import { countReducer, updateNavigation } from "../reducers/countReducer";
import { combineReducers } from "redux";

const allReducers = combineReducers({
  countReducer,
  updateNavigation,
});

const store = createStore(allReducers);
console.log(store.getState()); 

輸出：

{ countReducer: { count: 0 }, updateNavigation: { navigation: {} } }

uj5u.com熱心網友回復：

在你的 action/index.js

import { COUNTER_CHANGE, UPDATE_NAVIGATION } from "../constants";

export function changeCount(count) {

  dispatch( {
    type: COUNTER_CHANGE,
    payload: count,
  });
}

export function updateNavigation(obj) {

  dispatch({
    type: UPDATE_NAVIGATION,
    payload: obj,
  });
}

發送資料而不回傳

標籤：javascript 反应原生 还原 反应还原

上一篇：反應導航-道具值被用作導航setOption：引數鍵

下一篇：我如何在reactnative中構建一個文本輸入，它有一個占位符，單擊時會在頂部更改為textview