Как я могу получить состояние от селектора после свежей страницы? - PullRequest
Новая
       14

Как я могу получить состояние от селектора после свежей страницы?

1 голос
/ 27 марта 2019

У меня есть компонент контейнера в реагирующем шаблонном коде JS, который получает данные (скажем, список школ), используя sagas, в редуктор и устанавливает состояние, которое будет считываться функцией выбора на моей странице рендеринга для отображения пользователю.

Образцы данных saga.js, возвращаемые с сервера 

    data: [  {
                id: '1',
                name: 'School1',
                location: 'Location1',
             },
             {
                id: '2',
                name: 'School2',
                location: 'Location2',
             },
          ]

код actions.js 

    export function requestSchools() {
      return {
        type: REQUEST_SCHOOLS,
      };
    }
    export function requestSchoolsSucceeded(schoolsData) {
      return {
        type: REQUEST_SCHOOLS_SUCCEEDED,
        schoolsData,
      };
    }
*Фрагмент 1013 * reducer.js 
    function schoolsContainerReducer(state = initialState, action) 
    {
      switch (action.type) {
        case REQUEST_SCHOOLS_SUCCEEDED:
           return state.set('schools', action.schoolsData);
        default:
           return state;
      }
    }

фрагмент selector.js 

    const makeSelectSchools = () =>
     createSelector(selectSchoolsContainerDomain, schoolState =>
     schoolState.get('schools'),
    );

Фрагмент index.js 

    //This will trigger action REQUEST_SCHOOLS in action.js
    constructor(props) {
        super(props);
        this.props.requestSchools();
    }

    render() {
        const { schools } = this.props;

        const renderSch = schools.data.map(sch => (
          <div key={sch.id}>
            {sch.name} {sch.location}
          </div>
        ));
        return (
          <div>
            {renderSch}
          </div>
        );
      }

    const mapStateToProps = createStructuredSelector({
      schoolsContainer: makeSelectSchoolsContainer(),
      schools: makeSelectSchools(),
    });

    function mapDispatchToProps(dispatch) {
      return {
        //dispatch request schools action
        requestSchools: () => dispatch(requestSchools()),
      };
    }

При первом создании веб-пакета я могу получить данные и правильно отобразить их.Однако, когда я обновляю ту же страницу, данные поступают до редуктора (где установлено состояние), но не до селектора (где я получаю состояние).Как я могу получить данные из редуктора в селектор после обновления страницы?

1 Ответ

1 голос
/ 27 марта 2019

Прежде всего, попробуйте не использовать метод componentWillMount, поскольку он устарел в React (https://reactjs.org/docs/react-component.html#unsafe_componentwillmount)

. Я не понимаю, почему он не будет работать при обновлении. Возможно, вам не нужен вашселектор в качестве функции, и, возможно, вам нужно значение по умолчанию, чтобы обеспечить достоверность карты, которую вы делаете в React (может, это проблема здесь?) 

const makeSelectSchools = createSelector(
  selectSchoolsContainerDomain, // What is this doing? Getting the state of the previous reducer right?
  schoolState => schoolState.get('schools') || [],
);

И затем вызвать ее в контейнере: 

const mapStateToProps = createStructuredSelector({ schools: makeSelectSchools });

Вы уверены, что в вашей консоли больше нет журналов? Или в инструментах redux dev? Отладка довольно сложна, и я лично не вижу никакой причинычтобы ваше приложение работало только во время первой загрузки (если вы не управляете кешем).

Надеясь, что эти небольшие отзывы помогут вам сузить проблему:)

...