###### Table of Contents - [[#Basics]] - [[#Store]] - [[#Get state from the Redux Store]] - [[#Define a Redux Action]] - [[#Glossary]] ### Basics In Redux, there is a single state object that's responsible for the entire state of your application. This means if you had a React app with ten components, and each component had its own local state, the entire state of your app would be defined by a single state object housed in the Redux `store`. This is the first important principle to understand when learning Redux: *the Redux store is the single source of truth when it comes to application state*. This also means that any time any piece of your app wants to update state, it **must** do so through the Redux store. The unidirectional data flow makes it easier to track state management in your app. ### Store The Redux `store` is an object which holds and manages application `state`. There is a method called `createStore()` on the Redux object, which you use to create the Redux `store`. This method takes a `reducer` function as a required argument. `Reducers` are pure functions, that have the current application state and intended action as their first two parameters, and return the updated state. ```js const reducer = (state = 5) => { return state; } ``` ```js /* Redux methods are available from a Redux object For example: Redux.createStore() */ const store = Redux.createStore(reducer); ``` ### Get state from the Redux Store The Redux store object provides several methods that allow you to interact with it. For example, you can retrieve the current `state`held in the Redux store object with the `getState()` method. ```js const store = Redux.createStore( (state = 5) => state ); const currentState = store.getState(); ``` ### Define a Redux Action Since Redux is a state management framework, updating state is one of its core tasks. **In redux, all state updates are triggered by dispatching actions** (an action is simply a JavaScript object that contains information about an action event that has occurred) The Redux store receives these action objects, then updates its state accordingly. Sometimes a Redux action also carries some data. For example, the action carries a username after a user logs in. While the data is optional, **actions must carry a `type` property that specifies the 'type' of action that occurred**. ```js const action = { type: 'LOGIN' } ``` Think of Redux actions as messengers that deliver information about events happening in your app to the Redux store. The store then conducts the business of updating state based on the action that occurred. ### Define an Action Creator After creating an action, the next step is sending the action to the Redux store so it can update its state. In Redux, you define action creators to accomplish this. An action creator is simply a JavaScript function that returns an action. In other words, action creators create objects that represent action events. ```js const action = { type: 'LOGIN' } function actionCreator() { return action; } ``` ### Dispatch an Action Event The `dispatch` method is used to dispatch actions to the Redux store. Calling `store.dispatch()` and passing the value returned from an action creator sends an action back to the store. Recall that action creators return an object with a type property that specifies the action that has occurred. Then the `dispatch` method dispatches an action object to the Redux store. ```js const store = Redux.createStore( //reducer function (state = {login: false}) => state ); // Action Creator const loginAction = () => { return { // action type: 'LOGIN' }; }; // Dispatch the action here: store.dispatch(loginAction()); ``` ### Reducers (handle an action in the store) After an action is created and dispatched, the Redux store needs to know how to respond to that action. This is the job of a `reducer` function. Reducers in Redux are responsible for the state modifications that take place in response to actions. A `reducer` takes `state` and `action` as arguments, and it always returns a new `state`. It is important to see that this is the **only** role of the reducer. It has no side effects — it never calls an API endpoint and it never has any hidden surprises. The reducer is simply a pure function that takes state and action, then returns new state. Another key principle in Redux is that `state` is *read-only*. In other words, the `reducer` function must **always** return a new copy of `state` and never modify state directly. Redux does not enforce state immutability, however, you are responsible for enforcing it in the code of your reducer functions. You'll practice this in later challenges. ### Register a Store Listener Another method you have access to on the Redux `store` object is `store.subscribe()`. This allows you to subscribe listener functions to the store, which are called whenever an action is dispatched against the store. One simple use for this method is to subscribe a function to your store that simply logs a message every time an action is received and the store is updated. ### Combine Multiple Reducers When the state of your app begins to grow more complex, it may be tempting to divide state into multiple pieces. Instead, remember the first principle of Redux: all app state is held in a single state object in the store. Therefore, Redux provides reducer composition as a solution for a complex state model. You define multiple reducers to handle different pieces of your application's state, then compose these reducers together into one root reducer. The root reducer is then passed into the Redux `createStore()` method. In order to let us combine multiple reducers together, Redux provides the `combineReducers()` method. This method accepts an object as an argument in which you define properties which associate keys to specific reducer functions. The name you give to the keys will be used by Redux as the name for the associated piece of state. Typically, it is a good practice to create a reducer for each piece of application state when they are distinct or unique in some way. For example, in a note-taking app with user authentication, one reducer could handle authentication while another handles the text and notes that the user is submitting. For such an application, we might write the `combineReducers()` method like this: ```js const rootReducer = Redux.combineReducers({ auth: authenticationReducer, notes: notesReducer }); ``` ### Glossary - **Action** - an object that contains information about an action event that has occurred; delivers information about events happening in your app to the Redux store - **Action Creator** - a function that returns an action - **CreateStore** - a method on the Redux object used to create the Redux store - **Dispatch** - a method that dispatches actions to the Redux store - **Reducer** - a function that lets the store know how to respond (i.e. modify state) to an action; takes `state` and `action` as arguments and returns a new `state` - **Root Reducer** - - **Store** - an object which holds and manages application state #### More info [Some website](https://test.com) ___ **Tags**: #redux