Redux principle

react The data flow of component communication in is one-way , Only outer components can transmit data to lower components , But the lower components cannot be passed to the upper components , If the lower component needs to pass values to the upper component , You need the upper component to pass the method of modifying data to the lower component

redux The purpose is to solve react The way components communicate in

redux Subscription publishing mode , All subscriptions redux The components of , once redux The state of state Change , Then all subscriptions state Will be re rendered

redux It can be used in any frame

install      npm install redux

redux principle

import {createStore} from 'redux' 

console.log(createStore) ---ƒ createStore(reducer, preloadedState, enhancer) 

createStore Production container （ object ） Methods , Return value is an object   The argument is a function  

createStore Returned object ：{dispatch: ƒ, subscribe: ƒ, getState: ƒ, replaceReducer: ƒ, @@observable: ƒ}

1.   Definition store console.log(store)
   1. dispatch： distributed , For behavior
   2. subscribe： subscribe Subscription build
   3. getStore: Read state obtain state        

2. Definition reducer The first parameter state The second parameter action

3. Definition state

4. Definition action

app.js in Implement a counter  

import React from 'react';
import ReactDOM from 'react-dom/client';
import {createStore} from 'redux'
import './index.css';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));

function App (){
  return (
    <div>
      <h1>redux</h1>
      <button onClick={()=>{store.dispatch(increment)}}> increase </button>
      <p>{store.getState().count}</p>
      <button onClick={()=>{store.dispatch(decrement)}}> Reduce </button>
    </div>
  )
}
// 4.  Definition action
let increment = {type:'increment'}
let decrement = {type:'decrement'}
// 3. Definition state
let initstate = {
  count:0
}
//2. Definition  reducer   The first parameter   state   The second parameter  action
function reducer(state = initstate,action){
  switch(action.type){
    case 'increment' :return {count:state.count + 1}
    break;
    case 'decrement' :return {count:state.count - 1}
    break;
    default :return state
  }
}
//1.  Definition store
let store = createStore(reducer)
console.log(store)
// subscribe 
store.subscribe(() => {
  root.render(
    <React.StrictMode>
      <App></App>
    </React.StrictMode>
  );
  console.log(store.getState())
})
root.render(
  <React.StrictMode>
    <App></App>
  </React.StrictMode>
);
reportWebVitals();