concept

Redux is a javaScript state container that provides predictable state management. In addition to being used with React, Redux supports other interface libraries. It’s small and lean (only 2KB, including dependencies)

Redux has three cores

  • 1. Single data source
  • 2.State is read-only
  • 3. Use pure function classes to perform modifications

Core understanding

  • First, store and Action are imported into component. The component sends an action through store.dispatch(action). Once the action is sent, the reducer is triggered. The Reducer executes the specific logic through the corresponding actionType, returns the state, and passes the state to the Store. Store notifies (registers listeners with store.subscribe(callback)) the specific component; The subscribe callback calls store.getState() to get the updated state

react-redux

  • Cause: In REdux, if you want to send actions, you must enter store and action first, and then send them through Dispatch. Reducer is triggered and state is returned. Subscribe (callback); subscribe(); store.getState(); Redux is too complex to use in real development. React-redux allows the React component to easily read data from the Redux store and issue actions to the store to update data. So there are two important parts of React-Redux.
  • Provider: This component allows you to access store data throughout your app

    • 1.Provider is wrapped around the root component so that all child components can get State
    • 2. The Provider receives the Store as props and passes it through the context. In this way, any component in react can use the context to obtain the store
    • The function of provider is to make it easy for components to get state. The principle of Provider applies context in React.
  • connect: this method associates a component with a store
    • 1. The internal component of the Provider must be wrapped with CONNECT if it wants to use data from State. In other words, it must be strengthened by Connect
    • 2. Connect is convenient for our component to obtain the state in store

React-redux simple shopping cart addition and subtraction calculation

demo

Provider Component Practices (app.js)

  • 1. Import the Provider component in react-Redux
  • 2. Import the entire structure using the Provider component
  • 3. Set the store property for our Provider component, and this value is the store instance object that we built through createStore

connect

ComA component addition sends action

  • 1. Import the connect
  • Connect (function to accept data, function to send action)(add component to be strengthened)
  • 3. Build a function mapDispatchToProps(Dispatch), which is used to send actions
  • 4. In this function, we can return an object, key = method name, value: call dispatch to send the action
    1. The contents of the component can be referenced to this. Props

The ComB component shows the latest state of data reception

  • 1. Import the connect
  • 2. Enhance components with CONNECT
  • In order to accept data, 3.ComB needed to implement the first parameter of CONNECT
  • 4. One of the arguments in mapStateTpProps is the state we care about
  • 5. Return this state to get the latest data inside the component
    1. The key to whether ComB could get the data was the reducer
  • 7. Our component ComB can obtain the latest state only if the Reducer returns a new state