Redux 原理

react 中组件通信的数据流是单向的，只能外层组件传递数据给下层组件，但是下层组件不能传递给上层组件，如果下层组件需要传递值给上层组件，就需要上层组件传递修改数据的方法给下层组件

redux 目的就是解决react中组件通信的方式

redux就是订阅发布模式，所有订阅redux的组件，一旦redux中的状态state发生改变，那么所有订阅state的组件都会重新渲染

redux可用于任何框架

安装     npm install redux

redux 原理

import {createStore} from 'redux' 

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

createStore 生产容器（对象）的方法，返回值为一个对象  参数是一个函数 

createStore返回的对象：{dispatch: ƒ, subscribe: ƒ, getState: ƒ, replaceReducer: ƒ, @@observable: ƒ}

1.  定义store console.log(store)
   1. dispatch：派发，用于行为
   2. subscribe：订阅 订阅组建
   3. getStore: 读取state 得到state        

2. 定义 reducer 第一个参数 state 第二个参数 action

3. 定义state

4. 定义action

app.js 中 实现一个计数器 

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)}}>增加</button>
      <p>{store.getState().count}</p>
      <button onClick={()=>{store.dispatch(decrement)}}>减少</button>
    </div>
  )
}
// 4. 定义action
let increment = {type:'increment'}
let decrement = {type:'decrement'}
// 3.定义state
let initstate = {
  count:0
}
//2.定义 reducer  第一个参数  state  第二个参数 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. 定义store
let store = createStore(reducer)
console.log(store)
//订阅
store.subscribe(() => {
  root.render(
    <React.StrictMode>
      <App></App>
    </React.StrictMode>
  );
  console.log(store.getState())
})
root.render(
  <React.StrictMode>
    <App></App>
  </React.StrictMode>
);
reportWebVitals();