Redux技术问询：如何向mapStateToProps传递ID以获取对应实体

你其实离正确实现只差一步啦！问题出在mapStateToProps的参数上——它的第二个参数不是单独的id，而是组件接收到的所有props集合（通常叫ownProps），你可以从这个集合里取出你传递的id。另外，访问动态属性的时候不能用点语法，得用方括号[]来获取。

下面是修正后的完整代码：

容器组件代码（Container.js） #

// 正确获取对应ID的TodoList
const getTodoList = (state, id) => {
  // 用方括号访问动态属性，因为id是变量
  return state.TodoLists.entities[id];
};

// mapStateToProps的第二个参数是组件的props
const mapStateToProps = (state, ownProps) => {
  // 从ownProps里取出传递的id
  const { id } = ownProps;
  return {
    todoList: getTodoList(state, id)
  };
};

// 注意这里如果有mapDispatchToProps也要加上，没有的话可以只传mapStateToProps
const TodoListContainer = connect(mapStateToProps, mapDispatchToProps)(TodoListComponent);

export default TodoListContainer;

渲染代码（调用部分） #

你的渲染代码是没问题的，继续保持这样传递id即可：

let TodoListHtml = document.getElementById('TodoList');
render(
  <Provider store={store}>
    <TodoListContainer id={TodoListHtml.dataset.id}/>
  </Provider>,
  TodoListHtml
);

关键说明： #

• mapStateToProps的第二个参数ownProps包含了所有传入组件的props，包括你传递的id。
• 当属性名是动态变量时，必须用obj[variable]的语法访问，而不是obj.variable，因为JavaScript会把后者的variable当成字面量属性名，而不是变量。

这样修改后，你的容器组件就能正确根据传递的id从Redux state中获取对应的TodoList了。

内容的提问来源于stack exchange，提问作者Aerendir