Question

在此组件上，我正在渲染2条路线。在本地状态下，它可以完美工作，但是我试图在Redux上实现相同的功能，但是我不知道如何将信号发送到Redux来更改此状态的*:443部分。< / p>

这是以前的工作方式：

这在render方法中：

index

上面的代码按预期工作。现在，我需要使用Redux，但是我需要停止使用本地状态。动作：

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

那么，现在该怎么办才能处理来自组件的数据？我有这样的事情：渲染方法：

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

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

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

我想念什么？

更新：

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

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

我看到有2个索引，而更改其状态的一个索引是导航之外的索引：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'); };我需要在导航内部得到一个索引：{ homeScreen: { navigation: { index: 0, routes: [ { key: 'first', title: 'Drop-Off', routeName: 'DropOffHome' }, { key: 'second', title: 'Pick up', routeName: 'PickupHome' } ] }, index: 0 } }。

Answer 1

您尚未在Redux存储中正确更新状态。索引值位于navigation内部，因此您需要像这样更新它

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

本地状态可以正常工作，但是当我尝试使用Redux时，它无法正常工作

1 个答案: