本地状态正常工作，但是当我尝试对 Redux 进行相同操作时，它不起作用答案

【问题标题】：Local state working properly but when I try the same with Redux it doesn't work本地状态正常工作，但是当我尝试对 Redux 进行相同操作时，它不起作用
【发布时间】：2019-02-18 08:33:23
【问题描述】：

在这个组件上，我正在渲染 2 条路线。使用本地状态它可以完美运行，但我正在尝试使用 Redux 实现相同的效果，但我不知道如何将信号发送到 redux 以更改此状态的 index 部分。

这是以前的工作方式：

class MyComp extends Component {
  state = {
    index: 0,
    routes: [
      { key: 'first', title: 'Drop-Off' },
      { key: 'second', title: 'Pick up' },
    ],
  };

  handleIndexChange = indexParam => {
    const { navigation } = this.props;

    this.setState({ index: indexParam });

    if (indexParam) navigation.navigate('App2');
    else navigation.navigate('App');
  };
}

还有这个在渲染方法中：

  render() {
    return (
      <TabView
        navigationState={this.state}
        onIndexChange={this.handleIndexChange}
      />
    );
  }

上面的代码按预期工作。现在我需要相同但使用 Redux，所以我可能会停止使用本地状态。行动：

import ActionTypes from '../constants/ActionTypes';

export const indexRouteAction = index => ({
  type: ActionTypes.INDEX_ROUTE,
  payload: {
    index,
  },
});

export default indexRouteAction;

减速机：

import createReducer from '../../../redux/createReducer';
import ActionTypes from '../constants/ActionTypes';

const initialState = {
  navigation: {
    index: 0,
    routes: [
      { key: 'first', title: 'Drop-Off' },
      { key: 'second', title: 'Pick up' },
    ],
  },
};

const handlers = {
  [ActionTypes.INDEX_ROUTE](state, action) {
    return {
      ...state,
      index: action.payload.index,
    };
  },
};

export default createReducer(initialState, handlers);

那么现在我可以做些什么来处理来自组件的数据呢？我有这样的事情：渲染方法：

  render() {
    const { navigationStore } = this.props;
    return (
      <TabView
        navigationState={navigationStore}
        onIndexChange={this.handleIndexChange}
      />
    );
  }

我这样称呼商店：

export default compose(
  connect(
    store => ({
      navigationStore: store.homeScreen.navigation,
    }),
    dispatch => ({
      indexRouteActionHandler: data => {
        dispatch(indexRouteAction(data));
      },
    }),
  ),
)(withNavigation(TopTabView));

这是我在 onClick 函数上更改索引的函数：

  handleIndexChange = indexParam => {
    // BEFORE WITH STATE THIS FUNCTION WORKED WITH SETSTATE
    // NOW I HAVE TO MAKE IT WORK WITH REDUX STATE
    // this.setState({ index: indexParam });
    const { indexRouteActionHandler, navigation } = this.props;
    indexRouteActionHandler(indexParam);
    if (indexParam) navigation.navigate('App2');
    else navigation.navigate('App');
  };

我错过了什么？

更新：

我注意到这是我在 Redux DevTools 上看到的：

{
  homeScreen: {
    navigation: {
      index: 0,
      routes: [
        {
          key: 'first',
          title: 'Drop-Off',
          routeName: 'DropOffHome'
        },
        {
          key: 'second',
          title: 'Pick up',
          routeName: 'PickupHome'
        }
      ]
    },
    index: 0
  }
}

我看到有 2 个索引，其中一个更改其状态的索引是导航之外的索引：navigation: {...}, index: 0 我需要获取导航内部的索引：navigation: {index: 0, routes: [...]}。

【问题讨论】：

标签： javascript reactjs ecmascript-6 redux

【解决方案1】：

您没有在 redux 存储中正确更新状态。索引值在navigation 内，因此您需要像这样更新它

const handlers = {
  [ActionTypes.INDEX_ROUTE](state, action) {
    return {
      ...state,
      navigation: {
         ...state.navigation,
         index: action.payload.index,
      }
    };
  },
};

【讨论】：