Question

当前，我必须重新配置商店以创建选择器。有没有更好的方法可以做到这一点。

import { configureStore } from "../configureStore";
const { store } = configureStore();

export const getSession = () => store.getState().session.data || false;
export const getToken = () => store.getState().session.data.token || false;

Answer 1

选择器函数应将存储状态作为参数，而不是捕获存储引用。例如：

export const getSession = (state) => state.session.data || false;
export const getToken = (state) => state.session.data.token || false;

// use like:
const session = getSession(store.getState());

有关更多详细信息，请参见我的帖子Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance。

Answer 2

如果您打算在React世界中使用Redux，那么您绝对应该使用connect（https://redux.js.org/basics/usage-with-react）将redux存储附加到React组件的props上。

这样，只要商店中的值发生更改，您就会获得更新的道具提供给组件，并使用正确的值重新渲染组件。

这样，您通常就不需要store.getState()。您可以执行以下操作：

// selectors.js
const getSession = state => state.session.data || false

// component.js
const MyComponent = ({ session }) => <div>{session}</div>

const mapStateToProps = state => ({
  session: getSession(state),
})

export default connect(mapStateToProps)(MyComponent)

提取Redux存储/状态作为选择器

2 个答案: