Reux Reduction Store를 업데이트했지만 구성 요소가 다시 렌더링되지 않습니다.

Question

터미널을 사용하여 Dispatched 액션을 테스트하면 Redux-logger에 내 상태가 올바르게 업데이트되고 있음이 표시됩니다. 그러나 내 구성 요소가 상태 변경의 결과로 다시 렌더링되지 않습니다. 나는 재 렌더링하지 않는 구성 요소에 관한 SO 응답을 살펴 보았습니다. 대다수의 응답에서는 주 (State)가 변형되고 있다고 주장합니다. 결과적으로 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);

는 표상적인 반응 성분 반작용

,210

는

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;