Реакция компонента не обновляется, когда состояние избыточности было обновлено с успешным действием

Question

Впервые в React / Redux Combo и пытается решить проблему.

Когда пользователь впервые заходит или входит в систему / делается запрос api fetch_user.Предполагается, что страница будет отображаться по-разному в зависимости от их статуса входа в систему.В инструментах redux dev я вижу, как обновляется состояние, а поля заполняются до «auth» после начального состояния, однако, пока я нахожусь в подкомпоненте приложения, значение отображается как неопределенное.Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.Заранее спасибо.

    // app.js
            const initialState = {};
    const history = createHistory();
    const store = configureStore(initialState, history);

    const MOUNT_NODE = document.getElementById('app');

    const render = messages => {
      ReactDOM.render(
        <Provider store={store}>
          <LanguageProvider messages={messages}>
            <ConnectedRouter history={history}>
              <App />
            </ConnectedRouter>
          </LanguageProvider>
        </Provider>,
        MOUNT_NODE,
      );
    };

    // index.js
            class App extends React.Component {
      componentDidMount() {
        console.log('here');
        this.props.fetchUser();
      }
      render() {
        return (
          <ThemeWrapper>
            <AppContext.Consumer>
          ..... 
        App.propTypes = {
            fetchUser: PropTypes.any.isRequired
        };

   export default withRouter(connect(null, actions)(App));


  import { FETCH_USER } from '../actions/types';

  export default function (state = null, action) {
    switch (action.type) {
      case FETCH_USER:
        console.log('1');
        return action.payload || false;
      default:
        return state;
    }
  }
    // actions
    export const fetchUser = () => async dispatch => {
      const res = await axios.get('/api/current_user');
      // res is the output of the axios request
      dispatch({ type: FETCH_USER, payload: res.data });
    };

// Banner.js - auth = undefined
render() {
    console.log(this.props);
// === auth = undefined. I may be accessing it incorrectly


const mapStateToProps = state => ({
    gradient: state.getIn([reducerUI, 'gradient']),
    chat: state.getIn([chatUI, 'chatSelected']),
    auth: state.auth
  });

  const BannerMaped = connect(
    mapStateToProps,
  )(Banner);

  // configure store

      export default function configureStore(initialState = {}, history) {
        // Create the store with two middlewares
        // 1. sagaMiddleware: Makes redux-sagas work
        // 2. routerMiddleware: Syncs the location/URL path to the state
        const middlewares = [sagaMiddleware, routerMiddleware(history), reduxThunk];

        const enhancers = [applyMiddleware(...middlewares)];

        // If Redux DevTools Extension is installed use it, otherwise use Redux compose
        /* eslint-disable no-underscore-dangle, indent */
        const composeEnhancers =
          process.env.NODE_ENV !== 'production' &&
          typeof window === 'object' &&
          window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
            ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
                // TODO Try to remove when `react-router-redux` is out of beta, LOCATION_CHANGE should not be fired more than once after hot reloading
                // Prevent recomputing reducers for `replaceReducer`
                shouldHotReload: false,
              })
            : compose;
        /* eslint-enable */
        const store = createStore(
          createReducer(),
          fromJS(initialState),
          composeEnhancers(...enhancers),
        );

        // Extensions
        store.runSaga = sagaMiddleware.run;
        store.injectedReducers = {}; // Reducer registry
        store.injectedSagas = {}; // Saga registry

        // Make reducers hot reloadable, see http://mxs.is/googmo
        if (module.hot) {
          module.hot.accept('./reducers', () => {
            store.replaceReducer(createReducer(store.injectedReducers));
          });
        }

        return store;
      }

Answer 1

Вам также необходимо передать действия по отправке в методе connect.В вашем случае вы уже выполнили действие fetchUser ().Таким образом, вы можете передать его в метод подключения следующим образом:

const BannerMaped = connect(
  mapStateToProps,
  fetchUser
)(Banner);  

Я думаю, что это поможет.

Answer 2

Я все делал правильно, просто не обращался к объекту состояния соответствующим образом.Глядя на это немного слишком долго.

const mapStateToProps = state => ({
gradient: state.getIn([reducerUI, 'gradient']),
chat: state.getIn([chatUI, 'chatSelected']),
auth: state.getIn(['auth'])

});

Answer 3

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

Эта строка означает, что при обновлении магазина будет обновляться только компонент Banner, а не все приложение.

const BannerMaped = connect(
  mapStateToProps,
)(Banner);

Поэтому, где бы ни находился ваш компонент Banner, каждый раз, когда ответ fetchUser() завершается успешно и обновляет хранилище, будет перерисовываться только ваш компонент Banner.Если вам необходимо повторно обработать другие компоненты, они также должны подписаться на хранилище с соответствующим mapStateToProps.