View Code? Open in Web Editor
NEW
This project forked from austincodingacademy/react-redux-reducer-dashboard
Practice making a redux store, reducers and containers
HTML 28.31%
CSS 20.69%
JavaScript 51.00%
advanced-redux-practice's Introduction
- Create a new folder called reducers
- Create a file in this folder called index.js
- Import combineReducers from redux
- Create a reducer function for each piece of data in state.js
- newComments
- newTasks
- newOrders
- tickets
- orders
- tasks
- messages
- Remember 2 parameters state and action. Remember to return state
- Combine the reducers and export
- Create a store.js file
- Import createStore from redux
- Import state from state.js
- Import reducers from reducers/index
- Create the store and export it
Provide store to components
- In index.js
- Import Provider from react-redux
- Import store from store.js
- Use Provider component to wrap App
- Give Provider a prop “store” and the value of the store
- In each Container:
- Import connect from react-redux
- Create a function called mapStateToProps that takes parameter state
- Return an object. Decide what prop the component needs and this will be a key on the object
- Decide what data from state the component needs and that will be the value on the object
- Use the connect function and mapStateToProps to turn the component into a container
- Export the container
ONLY make these components into Containers
- Tickets (use as example)
- TransactionPanel
- TopNav
- TasksPanel
- Comments
- Orders
- Tasks
Think - Why do the other components not care about the database such that we don't need to make them Containers??
- In App.js remove the props parameter and all instances of passing props
- In index.js remove all instances of state and passing props to App
advanced-redux-practice's People
Contributors
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent