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

-1

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

的存储体系结构：

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

我派遣一个UPDATE操作的创造者：

dispatch(profile.actions.update({email: '[email protected]'}));

哪些更新商店状态，但不重新渲染连接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 
    ) 
    ) 
) 
}

来源

2017-09-16 T1000

我的猜测是，用户对象是相同的对象，因为它是 –

我的猜测是，用户对象是相同的对象，因为它是更新之前 - 因此redux假定没有任何变化。配置文件减速器和在用户中使用combineReducers似乎是明智之举，可能会产生意想不到的后果。您应该直接在用户缩减器中添加一个配置文件字段并返回一个新的用户对象。更好的方法是将电子邮件字段放在用户对象和沟渠配置文件中。

来源

2017-09-16 16:42:39

从我的理解之前，该连接功能进行比较，你在传递对象/值。所以在我的情况下，： '函数mapStateToProps（州）{ 回报{ initialFormValues：state.user.profile } }' 最初将有'值{电子邮件：空}'，然后更新到'{电子邮件： '[email protected]'}'。由于这是一个不同的对象，因此连接的组件应该在订阅商店时重新呈现。还是我误解了一些东西？ – T1000

我似乎意外地初始化了两个独立的商店实例。调度（在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;

来源

2017-09-18 15:57:54 T1000

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

回答

相关问题