Question

更改redux存储后，我的连接组件不会重新渲染。

商店结构：

{
  user: {
    profile:  {
      email: null
    }
  } 
}

我正在派遣一个UPDATE动作创建者：

dispatch(profile.actions.update({email: 'blah@blah.com'}));

更新存储状态，但不会重新呈现连接的ProfilePage组件！

-

/ ProfilePage.js （已连接的组件）

//component omitted 

function mapStateToProps(state) {
  return { 
    initialFormValues: state.user.profile 
  }
}

export default connect(mapStateToProps)(ProfilePage)

/ profileReducer.js （截获更新操作的地方）

export default function(state = { email: null }, action) {
  switch (action.type) {
    case t.UPDATE:
      return { ...state, ...action.values };  //this is a new object (not mutated)
    default:
      return state;
  };
};

/ userReducer.js

import { combineReducers } from 'redux';
import session from './session';
import profile from './profile';

export default combineReducers({
  profile: profile.reducer
});

/ rootReducer.js

import {combineReducers} from 'redux'; 
import {routerReducer as router} from 'react-router-redux';
import { reducer as form } from 'redux-form';
import user from './modules/user';

const rootReducer = combineReducers({  
  form,
  user: user.reducer, 
   router
})

export default rootReducer;

/ store.js

import reducer from './rootReducer';
import thunk from 'redux-thunk'
import logger from 'redux-logger'

import { createStore, compose, applyMiddleware } from 'redux';
import { routerMiddleware as router } from 'react-router-redux';

export default function(history) {
  return createStore(
    reducer, 
    compose(
      applyMiddleware(
        router(history),
    thunk,
    logger
      )
    )
  )
}

Answer 1

我的猜测是用户对象与更新前的对象相同 - 因此redux假设没有任何改变。配置文件缩减器和在用户中使用combineReducers似乎是unnesscary，可能会产生意想不到的后果。您应该直接在用户缩减器中添加配置文件字段并返回新的用户对象。更好的是，只需将电子邮件字段放在用户对象和沟渠配置文件中。

Answer 2

我似乎意外地初始化了两个单独的商店实例。调度（在App组件安装时调用）使用不同的存储。这就是它没有重新出现的原因

    class App extends Component {
      componentDidMount(props) {
        const jwt = localStorage.getItem('jwt');
        if(!!jwt) {
**        store(history).dispatch(user.actions.fetchUserData(jwt))    // the offending code
        }
      }

      render() {
        return (
          <Provider store={ store(history) }>    // And here a different store instance 
            <ConnectedRouter history={ history }>
              <AppWrapper>
            <MainNav />
            <Main>
              <Switch>
            <Route path="/login" 
               component={ LoginPage } />
        <Route path="/register" 
               component={ RegisterPage } />
          </Switch>
             </Main>
          </AppWrapper>
        </ConnectedRouter>
          </Provider>
        );
      }
    }
    export default App;

在redux存储更改后，连接的组件不会重新呈现。

2 个答案: