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

Question

Currently I'm having to reconfigure my store to create selector. Is there a better way to do this.

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

Selector functions should take the store state as the argument, not capture the store reference. As an example:

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

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

See my post Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance for more details.

Answer 2

If you are going to use Redux in React world, then you should definitely attach the redux store to the props of a React component by using connect ( https://redux.js.org/basics/usage-with-react ).

That way, whenever the values in the store changes, you get updated props provided to your component, re-rendering the component with the correct values.

With that, you generally don't ever need store.getState() . You do something like:

// 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)