It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
Refer to official Redux documentation for detailed usage. →
Refer to official Redux Toolkit documentation for detailed usage. →
superplate serves an optional
redux plugin that uses
- Create a store with a root reducer
- Add a root reducer that combines reducers.
createSlice accepts an initial state, an object full of reducer functions, and a "slice name", and automatically generates action creators and action types that correspond to the reducers and state.
- Add counter slice. Export
reduceras default and actions as named exports.
Since Redux Toolkit uses Immer under the hood, you can use mutating immutable updates.
Providerfrom React-Redux in
Now everything's ready to read data from store and dispatch some actions to make changes to store state.
All this work will be handled automatically by CLI, so you don’t need to do anything extra as long as you choose Redux Toolkit plugin during the project creation phase.
useSelector from React-Redux is used to read data from store. It accepts a single selector function. A selector is a function that takes the entire Redux store state as its argument, reads some value from the state, and returns that result.
The React-Redux also provides a
useDispatch hook that gives us the store's dispatch method as its result. This method is used to dispatch actions to make changes to the store state.
decrease are action creator methods that return actual action objects for dispatch. They are generated by
createSlice and can be accessed from the slice.
createAction under the hood to produce action creators.
Refer to official documentation on createAction usage for detailed usage. →
Redux middleware provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. Redux middleware can be used for logging, crash reporting, talking to an asynchronous API, routing, and more.
Redux Toolkit includes
thunk middleware by default.
Refer to official documentation on included default middleware for detailed usage. →
If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.