Reduxストアの更新は反映されますが、コンポーネントは再レンダリングされません

Question

端末を使用してディスパッチ・アクションをテストすると、Redux-loggerは自分の状態が正しく更新されていることを示します。しかし、私のコンポーネントは状態の変化の結果として再レンダリングされません。私はコンポーネントの再レンダリングに関するSOの答えを見てきましたが、回答の大部分は国家が突然変異していると主張しています。その結果、Reduxは再レンダリングしません。しかし、私はLodashのマージを使ってオブジェクトを深く掘り下げていますが、私は変更されたオブジェクトを返さないと確信しています。 （下の添付のスニペットを参照してください）

あなたからのアドバイスを聞いて、私の髪を引き出したいですか？

const usersReducer = (state = {}, action) => { 
 
    Object.freeze(state); // avoid mutating state 
 

 
    console.log(state); 
 
    // returns an empty object 
 
    let newState = merge({}, state); 
 
    console.log(newState); 
 
    // returns my state with my dispatched action object inside already??? 
 
    // newState for some reason already has new dispatched action 
 
    switch (action.type) { 
 
    case RECEIVE_USER: 
 
     let newUser = {[action.user.id] = action.user}; 
 
     return merge(newUser, newUser); 
 
    case RECEIVE_USERS: 
 
     newState = {}; 
 
     action.users.forEach(user => { 
 
     newState[user.id] = user; 
 
     }); 
 
     return merge({}, newState); 
 
    default: 
 
     return state; 
 
    } 
 
};

import { connect } from 'react-redux'; 
 
import { receiveUsers, receiveUser, refreshAll, requestUsers, requestUser } from '../../actions/user_actions'; 
 
import allUsers from '../../reducers/selectors'; 
 
import UserList from './user_list'; 
 

 
const mapStateToProps = (state) => ({ 
 
    users: allUsers(state), // allUsers (selector that takes the state specfically the user Object and returns an array of user Objects) 
 
    state 
 
}); 
 

 
const mapDispatchToProps = (dispatch) => ({ 
 
    requestUser:() => dispatch(requestUser()), 
 
    requestUsers:() => dispatch(requestUsers()), 
 
    receiveUsers: (users) => dispatch(receiveUsers(users)), 
 
    receiveUser: (user) => dispatch(receiveUser(user)), 
 
    refreshAll: (users) => dispatch(refreshAll(users)) 
 
}); 
 

 
export default connect(
 
    mapStateToProps, 
 
    mapDispatchToProps 
 
)(UserList);

コンテナコンポーネントを反応させる

表現的成分を反応させます

ストア

import { createStore, applyMiddleware } from 'redux'; 
 
import createLogger from 'redux-logger'; 
 
import RootReducer from '../reducers/root_reducer'; 
 

 
const logger = createLogger(); 
 
const configureStore = (preloadedState = {}) => { 
 
    return createStore(
 
    RootReducer, 
 
    preloadedState, 
 
    applyMiddleware(logger)); 
 
}; 
 

 
// const configureStore = createStore(rootReducer, applyMiddleware(logger)); 
 

 
// oddly enough, when I have the store as a constant and not a function that returns the store constant, dispatching actions through the terminal will correctly update the state and rerender the component 
 

 
export default configureStore;

はセレクタ

const allUsers = ({ users }) => { 
 
    return Object.keys(users).map(id => (
 
    users[id] 
 
)); 
 
}; 
 

 
export default allUsers;

に反応リアクト

Answer 1

あなたの反応コンポーネントはどのように見えますか？それらの内部状態または小道具を使用してデータをプッシュしていますか？通常、私は問題がRedux状態の小道具の内部状態を設定していることがわかります。あなたは、コンポーネントに小道具を下ろす必要があり、更新時に再レンダリングします。

また、小道具が本当に変化しているかどうかを確認するために https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

をチェックしてください。

Answer 2

私はこの解決方法を使用します。 私はユーザーを私の状態にし、componentWillReceivePropsを使って変更を加えて更新します。希望する:-)

class UserList extends React.Component { 
    constructor(props) { 
     super(props); 
     console.log(this.props); 
     this.state = { 
      users: props.users 
     }; 
    } 
    componentWillReceiveProps(nextProps) { 
     if (this.props.users !== nextProps.users) { 
      this.setState({ 
       users: nextProps.users, 
      }); 
     } 
    } 

    render() { 
    const { users, state } = this.props; 

    const userItems = users.map((user, idx) => { 
     return(<li key={idx}>{user.username}</li>); 
    }); 

    return (
     <div> 
     <ul> 
      { userItems } 
     </ul> 
     </div> 
    ); 
    } 
} 

export default UserList;