Now you know the first principle of Redux, which is that, everything that changes in your application, including the data and the UI state, is contained in a single object, we call the state or the state tree.
A store is a central repository that holds the entire application state. It is typically implemented using a library like Redux. The store is responsible for managing the state of the application and providing a way to access and update that state.
The store in React acts as a single source of truth for the application’s data. It holds the state in a plain JavaScript object and provides methods to interact with it. Components can subscribe to the store to receive updates when the state changes and dispatch actions to modify the state.
Reducers, on the other hand, are pure functions that define how the application state should change in response to dispatched actions. Reducers take the current state and an action as input and return a new state object. They should not mutate the existing state; instead, they create a new state object that reflects the desired changes.
Reducers play a crucial role in the store by handling different types of actions and updating the state accordingly. When an action is dispatched, the store invokes the relevant reducer, passing the current state and the action as arguments. The reducer then determines how the state should be modified based on the action’s type and returns the updated state.
By using reducers within the store, you can separate the concerns of state management from the components themselves. Components can focus on rendering the UI and dispatching actions, while the store and reducers handle the logic of updating the state. This promotes a more structured and scalable approach to managing application state in React.
getState(): This method is used to retrieve the current state from the Redux store. It returns the current state object stored in the store. We can use getState() to access and read the data stored in the store from our application components or other parts of the code.
dispatch(action): The dispatch method is used to trigger an action in Redux. It takes an action object as an argument and sends it to the store. The action describes what type of change or event has occurred in the application. When dispatch is called, Redux will invoke the appropriate reducers and update the state based on the action. This method allows us to make changes to the application state.
subscribe(listener): The subscribe method allows us to register a listener function that will be called whenever the state in the store changes. It takes a listener function as an argument, which will be invoked every time an action is dispatched and the state is updated. This is useful for components that need to be notified of state changes and update their UI accordingly.
combineReducers() is a helpful tool in Redux that allows us to organize and manage the state of a complex application. It divides the state into smaller parts, each handled by a separate reducer. Think of it as a way to organize items in different boxes. This helps keep our code organized, maintainable, and allows multiple developers to work on different parts of the application more efficiently. In short, combineReducers() simplifies state management in Redux and makes our code easier to understand and maintain.
worlds easiest guide to redux
testing reducers
Redux Docs
Hopefully just able to retain the information.
Be able to use all the cool tools appropriately!