javascript - 使用combineReducers后组件停止更新

Question

当前行为是什么？

我有一个 header 组件，应该在获取登录数据后更新。它检查用户名并显示欢迎消息。

在不使用combineReducers创建商店时，仅使用loginReducer我创建的一切工作正常，状态得到更新，然后组件也得到更新。然而，当使用combineReducers时，即使我在其中使用相同的单个reducer，组件也会停止更新。我还使用记录器中间件来显示状态更改，并且状态似乎已正确更新。

<小时/>

代码示例:

这有效:

请注意，我在这里仅显示相关文件部分。

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)

这是一张图片，我在其中描述了分派(dispatch)每个操作后的状态:

每当调度一个操作并记录上一个和下一个状态时，它们都是正确的，但我的组件不会更新。

我在这里遗漏了一些东西还是这确实是一个错误？

Answer 1

请测试您的 reducer 。 请保持状态平稳。 使用高阶组件进行身份验证逻辑。使用重新选择来提高性能。这是您减少的错误测试。这应该有效。深度嵌套状态不好，因为它会让你的状态难以思考和管理。我的代码如下:

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