Redux in React
- Create React App
- index.js
- redux folder
- actions (with index.js inside)
- reducers (with index.js inside)
- install
redux
andreact-redux
- Add Provider
- Wrap
<App>
with<Provider>
component
- Wrap
import { createStore } from redux
- Create a store
REDUCERS
Create reducers like normal and export
ACTIONS
Create actions like normal and export each function separately
COMPONENT where we want to dispatch and action
Use connect
in export statement
export default connect(null, {addOne, subOne})(Counter);
connect
creates a container component. It needs to know 1) which state we want to use and connect to props (first param) and 2) which actions to map to the dispatcher (second param)
It then returns a function that we need to call with the component we want to be the presentational component for the container connect
creates.