Компонент останавливает обновление после использования combReducers

Question

Каково текущее поведение?

У меня есть компонент заголовка, который должен обновляться после получения данных входа в систему. Он проверяет имя пользователя и отображает приветственное сообщение.

При создании магазина без использования combineReducers, используя только loginReducer Я создал все, что работает нормально, состояние обновляется, а затем компонент также обновляется. Однако при использовании combReducers, хотя я использую один и тот же редуктор внутри него, компонент перестает обновляться. Я также использую промежуточное программное обеспечение для регистрации, чтобы отображать изменения состояния, и состояние, похоже, правильно обновляется. Пример

---

Код:

Это работает:

Пожалуйста, обратите внимание, что я только показывать соответствующие части файла здесь.

index.js

const loggerMiddleware = createLogger(); 

// Here I'm creating the store with a single reducer function 
const store = createStore(loginReducer, applyMiddleware(thunkMiddleware, loggerMiddleware)); 

const router = createRouter(); 

ReactDOM.render(<Provider store={store}> 
     { router } 
    </Provider>, 
    document.getElementById('root') 
); 

loginReducer.js

// Please notice that here I'm not mutating state in any way 
// I'm always returning a new state as recommended by the docs 
const ACTION_HANDLERS = { 
    [REQUEST_LOGIN]: (state, action) => { 
    return ({ ...state, username: action.payload.username, authHeader: 'Basic ' + base64Encode(action.payload.username + ':' + md5(action.payload.password))}); 
    }, 
    [RECEIVE_LOGIN]: (state, action) => { 
    return ({ ...state, resources: action.payload.resources, isCashier: action.payload.isCashier }); 
    }, 
    [LOGOUT]: (state) => { 
    return ({ ...state, username: null, resources: {}, authHeader: null, isCashier: null }); 
    } 
} 

const initialState = { isCashier: null, resources: {}, username: null }; 
export default function loginReducer (state = initialState, action) { 
    const handler = ACTION_HANDLERS[action.type] 

    return handler ? handler(state, action) : state 
} 

export default loginReducer; 

LoginContainer.js

const mapActionCreators = { 
    doLogin, 
    doLogout 
} 

const mapStateToProps = (state) => ({ 
    resources: state.resources, 
    username: state.username 
}) 

export default connect(mapStateToProps, mapActionCreators)(Login) 

---

Это не работает:

Это версия, которая не работает, единственные изменения, которые я сделал, были: * Я теперь обертывание loginReducer внутри combineReducers * Я изменил mapStateToProps функция для того, чтобы получить эти свойства от вложенного login объекта внутри государства

index.js

const rootReducer = combineReducers({ 
    login: loginReducer 
}); 

const loggerMiddleware = createLogger(); 

// Now I'm not using the raw `loginReducer` anymore 
const store = createStore(rootReducer, applyMiddleware(thunkMiddleware, loggerMiddleware)); 

const router = createRouter(); 

ReactDOM.render(<Provider store={store}> 
     { router } 
    </Provider>, 
    document.getElementById('root') 
); 

loginReducer.js -> Это остается такой же, как и выше

LoginContainer.js

const mapActionCreators = { 
    doLogin, 
    doLogout 
} 

// Here I'm getting properties from `state.login` instead of `state` now due to the use of combineReducers 
const mapStateToProps = (state) => ({ 
    resources: state.login.resources, 
    username: state.login.username 
}) 

export default connect(mapStateToProps, mapActionCreators)(Login) 

Вот образ, в котором я описываю состояния после отправки каждого из действий:

Всякий раз, когда действие отправляется, а предыдущее и следующее состояние регистрируется, они верны, но мой компонент не будет обновляться.

Мне что-то не хватает или это действительно ошибка?

Answer 1

Пожалуйста, проверьте свои редукторы. держать состояние flat пожалуйста. использовать компонент высокого порядка для логики аутентификации. повторите выбор для повышения производительности. это ошибка проверки, которую вы уменьшите. это должно сработать. и глубокое вложенное состояние не является хорошей причиной, из-за чего вы усердно думаете и управляете. мой код ниже:

import { combineReducers } from 'redux'; 
 
//import the reducers ou want 
 

 
const authReducer = combineReducers({ 
 
    loginData: LoginReducer, 
 
    permission: permissionReducer 
 
}); 
 

 
export default rootReducer;

проверить это http://redux.js.org/docs/recipes/WritingTests.html