Last month I started making some implementations of Redux in some React projects. In the beginning, it took me a while to understand how to set up everything. Because it is a little complex to set up. But it will help a lot to store the data of an app. Let's start talking about what is Redux. Well, Redux is a predictable state container for JavaScript apps. It makes easier to manage the state of your application. In lees worlds, it helps you manage the data you display and how you respond to user actions. So in this article, a will explain how is the easy way to set up Redux in a React App. So when we run in the terminal to create our React App. npx create-react-app mynameapp Then we need to install redux and react-redux which is going to make most of the work for us. We run in terminal npm i redux react-redux The first step that we need to is to make some imports in our ./src/index.js The is going to help up to initialize our store createStore { createStore } ; import from 'redux' The Provider is going to help us to pass the store to all the components in our app. { Provider } ; import from 'react-redux' Then we need to import all our reducers. The reducers specify how the application's state changes in response to actions sent to the store. - this line will import the index.js that is inside the reducer folder. import allReducers from './reducers'; In the next line, we initialize our store passing all the reducer that we have. store = createStore(allReducers); const Then we use the Provider component that we import to pass the store to all the child components, wrapping the component that is our principal component. And we pass the store as a prop. App ReactDOM.render( <App /> , .getElementById( ), ); < = > Provider store {store} </ > Provider document 'root' After we set up everything on our ./src/index.js we are going to create our reducers in the reducers folder. we need to create one file per reducer that we have. In the reducer, we are going to explain what the action that reducer can receive and how it needs to process it. For example, in the next reducer that I call filter, I'm going to store in the state a string and I will initialize with an empty string. Also, we will pass in the argument the action that is going to be processed. Each action is an object with properties the type that is going to indicate to reducer with action needs to be executed and the payload that is any additional data that the reducer will need. filter = { (action.type) { : action.payload; : state; } }; filter; const ( ) => state = , action '' switch case 'CHANGE_FILTER' return default return export default In this sample, we are expecting only one type of action. That is . so when the reducer receives that action we will change the state with the payload that we send. For example, if we send in the payload the string "hello world" that is going to be our new state. CHANGE_FILTER One very important rule is that we can not mutate our state we always need to replace it. Here is another example of a reducer but in this case, I store an array and initialize that array with two elements that are objects. Also, this reducer has two actions to add a new book and to remove a book from the array. CREATE_BOOK REMOVE_BOOK book1 = { : .floor( .random() * ) + , : , : , }; book2 = { : .floor( .random() * ) + , : , : , }; books = { (action.type) { : [ ...state, action.payload, ]; : state.filter( book.id !== action.payload); : state; } }; books; const id Math Math 100 1 title 'The Martian' category 'Sci-Fi' const id Math Math 100 1 title 'Harry Poter' category 'Kid' const ( ) => state = [book1, book2], action switch case 'CREATE_BOOK' return case 'REMOVE_BOOK' return => book default return export default After we set up our reducers we need to combine them in one so we need to specify that in in this way. Inside combineReducers argument is an object with the different reducer that we have. ./src/reducers/index.js { combineReducers } ; books ; filter ; allReducers = combineReducers({ books, filter, }); allReducers; import from 'redux' import from './books' import from './filter' const export default Well, we already set up our reducer right now we need to create our actions. Remember that actions only describe what happened, but don't describe how the application's state changes. So we create an action folder and inside that folder, we will create an index.js in this file we will add our different actions. For example: createBook = ({ : , : value, }); removeBook = ({ : , : value, }); changeFilter = ({ : , : value, }); export const => value type 'CREATE_BOOK' payload export const => value type 'REMOVE_BOOK' payload export const => value type 'CHANGE_FILTER' payload Each function returns an object with the two properties type and payload. The payload will be a value that we pass in the argument. In the first one is an object. The second one is an integer and in the third one is a string. After we finish setting up our action we are ready to use our store in the components. To read the information in our store we need to import from react-redux. useSelector { useSelector } import from 'react-redux' Then we are going to create a variable to save the state that we require so we can use it as we want with the next line. books = useSelector( state.books); filter = useSelector( state.filter); const => state const => state Then if we want to change the state we need to import from react-redux to be able to change our state. useDispatch Also, we will need to import the action to indicate what we want to do. {useDispatch} {createBook} import from 'react-redux' import from '../actions' Then we need to use the next line to create a dispatch function. dispatch = useDispatch(); const We are ready to change our state with the next function dispatch(createBook(book)); In this case, we dispatch de action with the book argument to add a new book to the array. createBook And this way we can easily implement redux with react.
