Redux and React-Redux essentials

1. Basics: Redux is the centralized storage of global state and methods in a repository.

State and action are stored in the repository. State and action are passed to the reducer as parameters.

The Reducer is then passed into the createStore in redux to generate the repository.

import { createStore } from "redux";

function reducer(state = {
  count: 1
}, action) {
  //console.log(state,action);
  switch (action.type) {
    case "add":
      return {
        count: state.count + 1
      }
    case "minus":
      return {
        count: state.count - 1}}return state;
}
const store = createStore(reducer);
Copy the code

The state in the store can be obtained by using store.getState(), and the add operation is triggered by using store.dispatch({type:”add”}).

Subscribe (()=>fn())) to unsubscribe from fn. To add a listener again, call ()=>unSunscribe=store.subscribe(()=>fn()).

<button onClick={unSubscribe}> </button><button onClick={()= >{ unSubscribe = store.subscribe(() => { render(); }); }}> Add listener</button>
Copy the code

2. react-redux

   • Introducing the Provider in react-redux in the top-level file index.js can pass stores globally.

     import store from "./store";
     // React-redux redux is a react-redux binding library for react projects.
     
     ReactDOM.render(
       <Provider
         store={store}
       >
         <App />
       </Provider>.document.querySelector("#root"));Copy the code

   • If there are two reducer functions, combineReducers need to combine the two reducer functions into createStore parameters when creating a store

     import { createStore,combineReducers } from "redux";
     import count from "./count";
     import todo from "./todo";
     // Reducer will become extremely large after many applications
     // function reducer(state={
     // count:1,
     // todo:[]
     // },action) {
     // return {
     // count:count(state.count,action),
     // todo:todo(state.todo,action)
     / /}
     // }
     // const reducer = combineReducers({
     // count:count,
     // todo:todo
     // });
     // const reducer = combineReducers({
     // count,
     // todo
     // });
     // console.log(reducer);
     const store = createStore(combineReducers({count,todo}));
     export default store;
     Copy the code

   • hooks

     • UseSelector: Use useSelector(state=>mapState) ‘to get the state in the store

     • UseDispatch: Use useDispatch() to obtain the dispatch method and use the parameters passed in the dispatch method to trigger the actions in the Reducer in the store.

     • UseStore: Store objects can be obtained, but are not used.

       import { useDispatch, useSelector, useStore} from "react-redux";
       
       function Count() {
         const count = useSelector(state= >state.count);
         const d = useDispatch();
         console.log(useStore());
         return <>
           <p>{count}</p>
           <button onClick={()= >{
             d({
               type: "add"
             })
           }}>+</button>
           <button onClick={()= >{
             d({
               type: "minus"
             })
           }}>-</button>
         </>
       }
       export default Count;
       Copy the code

   • If two reducer have the same trigger type when they are triggered, both reducer will be triggered and a conflict will occur. Pay attention to whether the triggered types are the same. If they are the same, modify them. You are advised to add a prefix.