Redux ~ Setup - rohit120582sharma/Documentation GitHub Wiki

The different parts of the app need to be wired up together. This happens in setup.


Actions

  • A collection of all possible events that can occur in our app which will update the state.
  • An action is just a JavaScript object which can describe what happens in the app, and what should change.
  • The only way to modify the state is through emitting an action to store.
  • Actions are payloads of information that send an instruction on what type of transformation to make to your application’s state as well as any other relevant information.

Reducers

  • A reducer function is responsible to return a state of the application.
  • When an action is dispatched, the reducer function will be invoked with the current state of the application and the action that causes the state to update. A Reducer function actually changes the state appropriate to that action – or returns the existing state if the action is not applicable to that reducer.

Combine Reducers

  • Individual reducers are combined into a single rootReducer to create the discrete properties of the state. each reducer manages independent parts of the state.
  • The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore.
  • The resulting reducer calls every child reducer, and gathers their results into a single state object. The state produced by combineReducers() namespaces the states of each reducer under their keys as passed to it.

Create a store

  • The Store is the thing that brings it all together: it represents the state by using the rootReducer, any middleware (Thunk in our case), and allows you to actually dispatch actions.
  • A store should have four parts:
    • The state (state-tree)
    • Get the state (getState)
    • Listen to changes on the state (subscribe)
    • Update the state (dispatch)
  • A store is created using createStore().

Action creators

  • It is another common convention that, instead of creating action objects inline in the places where you dispatch the actions, you would create functions generating them.
  • Action Creator are the functions that are dispatched to emit a change – all they do is return an action. They let you decouple additional logic around dispatching an action, from the actual components emitting those actions.
  • Handle side-effects outside of the reducer in the action creators.

Tie Store to React

To connect the store to the views, Redux needs something to bind the two together. The view layer binding introduces three concepts:

Provider component

  • If we want to link our React application with the redux store, we first have to let our app know that this store exists.
  • Provider is a React component given to us by the react-redux library. It serves just one purpose : to “provide” the store to its child components. So we put our <App> component within <Provider> component.

Connect component

  • Now that we have “provided” the redux store to our application, we can now connect our components to it using connect().
  • It is a function provided by react-redux library. If a smart component wants to get state updates, it wraps itself using connect(). Then the connect function will set up all the wiring for it, using the selector.
  • It’s important to note that only components within the Provider can be connected.

Selector functions

  • These functions uses connect() to map the stores state and dispatch to the props of a component.
  • The mapStateToProps and mapDispatchToProps are both pure functions that are provided the stores “state” and “dispatch” respectively.

Prepare the action callbacks

  • To make it easier for dumb components to work with actions, the smart components can setup action callbacks by using bindActionCreators(). This way, they can just pass down a callback to the dumb component. The action will be automatically dispatched after it is formatted.

⚠️ **GitHub.com Fallback** ⚠️