Setting Up A Redux State¶

How The Redux Store Works With A React Component

This image demonstrates how a react component and redux interact with each other. A react component dispatches actions to redux. Redux passes the action to the reducer which communicates any changes to the store. A payload is used to send information through redux.

Redux Reducer¶

React Redux Reducer

A reducer is used to manipulate the data prior to being added to the store. The reducer executes the action to update the store. In the reducer you can create the initialState which creates a current state. This state will be updated when actions are executed. A case is used to communicate with redux actions.

Redux Actions¶

React Redux Actions

An action holds a payload of information from your react component to send to the store. An action must have a Type in the return of the function to indicate to the reducer the Type of action executed.

The Type must have the same name as a Reducer Case to be able to communicate with each other. For example in this redux action the function updates the globalSaleTitle with Type "SET_GLOBALSALESTITLE". The reducer has a Case "SET_GLOBALSALESTITLE" which executes the updates to the store. You need to connect your reducer to the store.

Redux Store¶

React Redux Combine Reducers

To connect the reducer to the store, In core.js combineReducers add a store id (yellow text) and the reducer file name (blue text) with the word Reducer on the end. Import the reducer file into core.js.

Warning: if the store id in core.js combineReducers and initalState in redux reducer share the same name you can have some problems using redux. To avoid these problems create a different store id name to the initalState.

You can now console.log the store in a react component and you should see the redux state in the store id you just created.