combineReducers를 사용한 후 구성 요소가 업데이트를 중지합니다.

Question

현재 동작은 무엇입니까?

로그인 데이터를 가져온 후에 업데이트해야하는 헤더 구성 요소가 있습니다. 사용자의 이름을 확인하고 환영 메시지를 표시합니다.

combineReducers을 사용하지 않고 상점을 생성 할 때 loginReducer 만 사용하면 모든 것이 잘 작동하고 상태가 업데이트 된 다음 구성 요소가 업데이트됩니다. 그러나 combineReducers를 사용할 때 동일한 단일 감속기를 사용하더라도 구성 요소가 업데이트를 중지합니다. 또한 로거 미들웨어를 사용하여 상태 변경 사항을 표시하고 있으며 상태가 제대로 업데이트되고있는 것 같습니다.

---

코드 예제 :

이 작동 :

내가 여기 만 해당 파일의 부분을 보여주는거야 것을 알하시기 바랍니다.

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) 

01,

이 작동하지 않습니다

이 작동하지 않습니다 버전입니다, 내가 만든 한 유일한 변화가 있었다 : 나는 mapStateToProps을 변경 * 내가 지금 loginReducer combineReducers 내부 포장 해요 * 순서 함수 상태

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') 
); 

내측 중첩 login 개체에서 그 특성을 얻을

: - 617,451,515,

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

감속기를 테스트하십시오. 평평한 상태로 유지하십시오하십시오. 인증 로직에 대한 상위 구성 요소를 사용합니다. 성능을 향상시키기 위해 다시 선택하십시오. 그것은 버그 테스트를 줄입니다. 이게 효과가있다. 깊숙이 중첩 된 상태는 당신이 생각하고 관리하는 것을 어렵게 만드는 좋은 이유가 아닙니다. 아래 내 코드 :

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