Локальное состояние работает нормально, но когда я пытаюсь сделать то же самое с Redux, он не работает

Question

На этом компоненте я рендеринг 2 маршрута.С локальным состоянием это прекрасно работает, но я пытаюсь добиться того же с 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: [...]}.

Answer 1

Вы неправильно обновили состояние в хранилище резервов.Значение индекса находится внутри navigation и, следовательно, вам необходимо обновить его как

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