React-Redux: mapStateToProps and mapDispatchToProps

I recently finished the last project at Flatiron School. During that time I integrated React with Redux in my application. I was so confused about how Redux works especially mapStateToProps and mapDispatchToProps. The function mapStateToProps is used to get the data out of the store. The function mapDispatchToProps is used when you want to update the state.

Before we can access Redux, we have to add redux into the React application. Please refer to React-Redux on how to install Redux.

1. Install redux
   To create a new application use below code

npx create-react-app my-app --template redux

If React Application already exists

npm install redux react-redux

2. Integrating React with Redux by creating a Redux store

• To create the store and pass reducers to the Redux createStore. The function<Provider> is to pass the store down to components. So you can {connect} your application to the store .
  2.1 import { createStore, applyMiddleware } from ‘redux’ ;
  2.2 import { Provider } from “react-redux”;
  2.3 import recipesReducer from ‘./reducers/recipesReducer’
  2.4 import { composeWithDevTools } from ‘redux-devtools-extension’
• optional — if you think your application needs to install middleware Thunk, here is the code to install Thunk.
  2.5 import thunk from ‘redux-thunk’;

npm install redux-thunk

yarn add redux-thunk

• — Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters. (reference from Redux Thunk)

3. Create mapDispatchToProps function to update state in Redux store
3.1 Create actions (../src/actions/recipeReducer)
This happens when you dispatch mapStateToProps of the actions and fetchRecipes is called

3.2 Create reducers (…src/reducers/recipeReducer)
When you dispatch the function and it triggers actions in the recipeReducer, state will be updated as you set return. In this case, you can separate state of categories and areas to new reducers and use function { combineReducers } from ‘redux’. In my case, I just wanted to keep track of categories and areas to show information in the filter.

3.3 Implement mapDispatchToProps and connect to the component that you would like to dispatch the actions. In order to “import { connect }” to connect a React component with a Redux store and import the function in actions folder as follows:
3.3.1 import { connect } from “react-redux”;
3.3.2 import { fetchRecipes } from “../actions/recipesActions”;
3.3.3 create mapDispatchToProps or write shorthand like this {fetchRecipes}
3.3.4 write the function where you would like it to get called to. In my case, I called the function in lifecycle methods (async function) due to method will be called when the component is mounted or inserted into the DOM.

4. Create mapStateToProps if you would like to get the data out of the store and show it in your components.
4.1 import { connect } from “react-redux”;
4.2 create mapStateToProps function to get the data out of store and you can pass OwnProps. In this case, I pass search and filter states as their ownProps.

Moreover, mapStateToProps and mapDispatchToProps can be represented by any name that you desire but are typically identified as these standard names. The order in the connect function is important. If you don’t connect with mapStateToProps, you have to use “null” which allows you to write the second argument which is mapDispatchToProps as follows:

I hope you found my blog examples helpful. I really enjoyed being a student at Flatiron School and learning how to hone my coding skills. I am looking forward to utilizing this knowledge in my future work as a full stack web developer.

Resource

1. Installation React-Redux
2. Redux Thunk
3. Function componentDidmount()
4. createStore function