React Redux Redux-thunk essential
This blog post will explain the basic of understanding React Redux concept.
In order to avoid passing props down to components in React, Redux is very helpful to manage the states. It is similar to a cycle. Only 3 steps to master. You must have a reducer(store), set up you index.js to make store available to your app finally connect the component that need states within your store.
Initial set up
npm install --save create-storenpm install –save redux react-redux / yarn add react-reduxnpm install --save redux-thunk
IN INDEX.JS
Import createStore, import provider, import recuder, and Import thunk.
Define a var and assign crearteStroe(reducer)
send your var into provider to make it available to whole app
IN APP.JS
. Import connect .
. import your store method that you need . Here we need fetchDeliversCreator. In this case let say you want to make your initial fetch available to your whole app then you can use componentDidMount()
. Map your necessary states to your Redux store which is located in your reducer.
. Set your Map Dispatch to Props action is you need it. In this case we need to dispatch fetchDelivers in our componentDidMount.
. export default connect(mapStateToProps, mapDispatchToProps)(App);
IN REDUCER.JS
Only 3 steps you need to master.
. Initial state (add only the states that 2 or more components are sharing.
. Methods or const you need to export (this make them to be import in other components)
. Reducer you need to export ( this make the reducer to be import in index.js to create your Redux store)
About thunk:
Thunk is a programming concept where a function is used to delay the evaluation/calculation of an operation.
Redux Thunk is a middleware that lets you call action creators that return a function instead of an action object. That function receives the store’s dispatch method, which is then used to dispatch regular synchronous actions inside the function’s body once the asynchronous operations have been completed.
