You can freedomly use Redux which is a very popular tool in
React community to solve data management problems for complex projects.
First please install
redux-logger and so on ,such as
redux middleware which you need.
Then you can create a new directory named
store under the project
src directory, and add an
index.js file under the directory to configure the
store, set up the middleware of
redux according to your preferences. As in the following example, using
in the following example redux-thunk and
redux-logger these two middleware.
Next, use the
Provider component provided in
redux to connect the previously written
store to the application, in the project entry file
Then you can start use it. As recommended by
redux, you can add
constants directory, used to store all
action type constants
actions directory, used to store all
reducers directory, used to store all
For example, If we want to develop a simple counter function just contains add and subtract.
Finally, we can use it in the page (or component).The
connect method provided by
redux will commect
redux with our page.
connect method will receive two parameters:
mapStateToProps, function type, accepts the latest
stateas a parameter, which is used to map
mapDispatchToProps, function type, receive the
dispatch()method and return the callback function expected to be injected into the
propsof the display component.
The basic setting of using hooks is the same as
connect. You need to set up your
store and put your application in the
使用 hooks 的基本设置和使用
connect 的设置是一样的, 你需要设置你的
In this case, you can use Hooks API provided by
redux in function component.
useSelector allows you to use selector function to get data from a Redux Store.
The Selector funtion is roughly equivalent to the
mapStateToProps parameter of the
connect function. It will be called every time the component renders. And it will also subscribe to the Redux store, which will be called when a Redux action is dispatched.
useSelector is still somewhat different from
mapStateToPropswhich only returns objects, the Selector may return any value.
- When an action is dispatched,
useSelectorwill make a shallow comparison of the return value before and after the selector. If they are different, the component will be forced to update.
- The Selector function does not accept the
ownPropsparameter. But selector can access the props passed down by functional components through closures
Use the closure to decide how to select data:
You could learn how to use
reselect to cache selector from react-redux documentatio.
This Hook will return a reference to the
dispatch of the Redux store. You can use it to dispatch actions.
It's recommend to use
useCallback to cache the callback, when we use
dispatch to pass a callback to child component. Because the component may be re-redered due to changes in references.
useStore returns a store reference, which is exactly the same as the
Provider component reference.
This hook may not be used often, But
useSelector is your first choice in most cases, If you need to replace reducers, you may use this API.