-
-
Save mfrancois3k/1aba5fce7450b4cae824c35f935350b5 to your computer and use it in GitHub Desktop.
Redux setup and explanations (General and React setup)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
a Basic redux setup in a React application covering fundamental steps | |
#1 Create store (using 'redux'), we will pass the root reducer in here later (root reducer contains all other reducers) | |
#2 Wrap App root element in Provider (from 'react-redux') | |
#3 Create a root reducer file with reducer function with args of state & action and returning state. define init state | |
at top of file and feed as state arg | |
- We can create multiple reducers for different parts of our app to handle their own set of actions and then combine these reducers into one Root Reducer and pass it into the store. | |
- We can make reducers in their own files, then in the rootReducer file -> use the combineReducers method from 'redux' to combine all the reducers into the rootReducer | |
#4 Pass root reducer into createStore method/hook imported from 'redux' | |
#5 use connect function from 'react-redux' and invoke it in whatever React component | |
#6 in React component, map Redux store contained state to component props (mapStatesToProps is arg for connect method | |
from 'react-redux') | |
#7 can now access Redux store state as props in our component |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment