Диспетчеризация данных Redux и получение состояния

Question

Я застрял на реализации Redux во время разработки приложения с использованием React Native и Redux. Я делаю это в первый раз и следую этому примеру .

Я уже установил Redux и React Native Navigation. Я хотел бы сохранить состояние, содержащее данные для стран (пользователь выбрал страну и хотел бы сохранить выбор к моменту, когда он просматривает все экраны).

Хорошо. Я создал компонент, который можно увидеть на всех экранах, например:

        LinksScreen.navigationOptions = {
         headerTitle: 'Links',
         headerRight: <CountriesPickButton/>,
       };

Затем я визуализирую кнопку и жду изменения в компоненте. По умолчанию он должен показывать основную страну. Далее пользователь нажимает на кнопку, и он открывает модальное меню, в котором есть выпадающее меню. Например, я показываю вам выбор страны по умолчанию:

import { connect } from 'react-redux'
import store from '../../redux/countries'

export default class CountriesPick extends Component {

render() {....  // here is the button and modal, etc. It's work. 
}

 constructor(props, context) {

    super(props, context);

    this.state = store.getState();

    store.subscribe(() => {

      this.setState(store.getState());

    });

    this.defaultCountry(251);
}


async defaultCountry(countryId) {

    return fetch(URL)
      .then((response) => response.json())
      .then((responseJson) => {
        for (const key of Object.keys(responseJson.result)) {
          // this works for current screen: this.setState({ defaultCountry: responseJson.result[key], selectedCountry: responseJson.result[key].country_id });
          store.dispatch({ defaultCountry: responseJson.result[key], selectedCountry: responseJson.result[key].country_id ,  type: 'countries' });

        }

        return responseJson.result;
      })
      .catch((error) => {
        console.error(error);
      });

state = {
  showModal: false,
  countries: [],
  selectedCountry: 0,
  defaultCountry: [], 
  type: 'countries'
  };
  }

Без store.dispatch({}) Я могу изменить государство со страной, но оно не должно делиться между экранами. Это потому, что я начал с Redux.

Вот код Redux ():

import { createStore } from 'redux'

const defaultState = {
  showModal: false,
  countries: [],
  selectedCountry: 0,
  defaultCountry: [], 
  type: 'countries'
};

function store(state = defaultState) {

  return state;
}

export default createStore(store);

Что-то не так, как должно быть. Когда я вызываю store.dispatch({...}), он не меняет состояние, он возвращает массив по умолчанию. Думаю, мне нужно использовать <Provider></Provider> в App.js, чтобы перехватить каждое изменение, но сначала мне нужно понять, в чем я не прав?

Это вообще связано? В примере, которому я следовал, я не увидел connect(). Кроме того, я не уверен, что правильно использую type.

Заранее спасибо.

Answer 1

Проблемы здесь следующие:

1. Пример по предоставленной вами ссылке, по меньшей мере, плох. Не следуйте этому
2. Вы сказали, что используете реагировать-нативная навигация , но код, который вы предоставили, приходит от реагировать-навигация . Я предлагаю использовать последний, особенно для начинающих
3. Ваш код createStore не будет работать, так как редуктор для хранилища должен быть функцией state и action

С учетом вышесказанного, вы обязательно должны увидеть Basic Tutorial redux с примерами. Вам почти никогда не придется делать store.getState() или store.dispatch() при использовании реакции с избыточностью, так как пакет react-redux (включенный в учебное пособие, которое я связал) сделает это за вас. Вместо этого вы объявите зависимость между состоянием вашего магазина и реквизитами, которые ваш компонент получает