In this article, we are going to learn about Redux Store. It is the object which holds the state of the application. The store is one of the building blocks of Redux. Redux is a state managing library used in JavaScript apps. It is used to manage the data and the state of the application.
Uses of Redux: With the help of redux it is easy to manage state and data. As the complexity of our application increases. At the start, it is hard to understand but it really helps to build complex applications. In starting, it feels like a lot of work, but it is really helpful.
Store: A store is an object that holds the entire state of the application. With the store, we can hold and access the current state of the application. It has a dispatch method that allows updating the state of the application. It can also register and unregister the listener callbacks. Redux application can only have a single store in it.
To create the store in our application. We use the createStore API of the redux library. This method is used to create a store of the redux application.
Syntax:
const store = createStore(reducer);
As we can see in the syntax, the createStore method has a reducer argument in it. Now, what is a reducer? Reducers are the pure functions that take the current state and action and return the new state and tell the store how to do it.
We can also create the store by using the below syntax:
createStore(reducer, [preloadedState], [enhancer])
- preloadedState: This argument is optional. It can be used for the initial data of the application.
- enhancer: This is also an optional argument. It can change the way of store behavior. Basically, It enhances the store with third-party capabilities such as middleware, time travel, persistence, etc.
Important methods of Store:
getState(): This method is used for getting the current state of the store.
Syntax:
store.getState()
dispatch(action): This method is used to change the state of the application. It passes the action object as an argument. Basically, after dispatching the action, the store will run its reducer function (a pure function that takes the current state and action and returns the new state, and tell the store how to do it). And save the new value inside it. Then store calls the listener callbacks.
The dispatch method takes action as an argument. Now, what is Action? Actions are JavaScript object that contains information. Actions are the only source of information for the store.
Syntax:
store.dispatch({ type: 'Action' })
Subscribe: This method is used to keep the array of listener callbacks. These listeners will be called by the redux Store after the action has been dispatched. It returns a function to remove the listener.
Syntax:
store.subscribe(()=>{ console.log(store.getState());})
Now we know about the store and its method. Below is an example of how to create a react-redux application.
Steps to create a React-Redux Application:
Step 1: Initially, create a React app using the below-mentioned command:
npx create-react-app MyApp
Step 2: After creating your project folder(i.e. MyApp), move to it by using the following command.
cd MyApp
Step 3: Once you are done creating the ReactJS application, install redux and react-redux
npm install redux react-redux
Project Structure: It will look like the following:
gfg
Example: In this example, we have created two buttons one will increment the value by 2 and another will decrement the value by 2 but, if the value is 0, it will not get decremented we can only increment it. With Redux, we are managing the state.
App.js
import React from "react"; import "./index.css"; import { useSelector, useDispatch } from "react-redux"; import { incNum, decNum } from "./actions/index"; function App() { const mystate = useSelector((state) => state.change); const dispatch = useDispatch(); return ( <> <h2>Increment/Decrement the number by 2, using Redux.</h2> <div className="app"> <h1>{mystate}</h1> <button onClick={() => dispatch(incNum())}>+</button> <button onClick={() => dispatch(decNum())}>-</button> </div> </> ); } export default App; |
index.js
export const incNum = () => { return { type: "INCREMENT" } } export const decNum = () => { return { type: "DECREMENT" } } |
src/reducers/func.js
const initialState = 0; const change = (state = initialState, action) => { switch (action.type) { case "INCREMENT": return state + 2; case "DECREMENT": if (state == 0) { return state; } else { return state - 2; } default: return state; } } export default change; |
src/reducer/index.js
import change from './func'import { combineReducers } from 'redux'; const rootReducer = combineReducers({ change }); export default rootReducer; |
store.js
import { createStore } from 'redux'; import rootReducer from './reducers/index'; const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); export default store; |
src/index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App.jsx'import store from './store'; import { Provider } from 'react-redux'; ReactDOM.render( <Provider store={store}> <App /> </Provider> , document.getElementById("root") ); |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output:
