react-redux

前置知识

发布者订阅者模式

可用于非父子组件传值。
1.创建一个bus.js 用来放订阅者和发布者的方法。

let bus = {
  arr: [],
  // 订阅者（传入回调
  subScribe(callback) {
    this.arr.push(callback)
  },
  // 发布者（执行回调，传入参数
  publish(params) {
    this.arr.forEach(callback => {
      callback && callback(params)
    })
  }

}

export default bus

组件A

import React from 'react'
import bus from '../../utiles/bus'

export default function Add() {
  return (
    <div>

      <button onClick={() => {
        bus.subScribe((val) => {
          console.log(val)
        })
      }}>加</button>
    </div>
  )
}

组件B

import React from 'react'
import bus from '../../utiles/bus'

export default function Jian() {
  return (
    <div>
      <button onClick={() => {
        bus.publish(114514)
      }}>减</button>
    </div>
  )
}

useContext

用于向子组件传递数据，方法。配合useReducer，管理状态
什么是上下文呢？
全局变量就是全局的上下文，全局都可以访问到它；上下文就是你运行一段代码，所要知道的所有变量
使用
1.要先创建createContex
使用createContext创建并初始化
const c = React.createContext(null) // 写在组件外面

2.Provider 指定使用的范围
在圈定的范围内，传入读操作和写操作对象，然后可以使用上下文

 <C.Provider value={{n,setN}}>
      这是爷爷
      <Baba></Baba>
    </C.Provider>

3.最后使用useContext
使用useContext接受上下文，因为传入的是对象，则接受的也应该是对象

const {n,setN} = useContext(C)；

案例
注意，不在一个文件中要导出，导入c

import React, { createContext, useContext, useReducer, useState } from 'react'
import ReactDOM from 'react-dom'

// 创造一个上下文
const C = createContext(null);

function App(){
  const [n,setN] = useState(0)
  return(
    // 指定上下文使用范围，使用provider,并传入读数据和写入据
    <C.Provider value={{n,setN}}>
      这是爷爷
      <Baba></Baba>
    </C.Provider>
  )
}

function Baba(){
  return(
    <div>
      这是爸爸
      <Child></Child>
    </div>
  )
}
function Child(){
  // 使用上下文，因为传入的是对象，则接受也应该是对象
  const {n,setN} = useContext(C)
  const add=()=>{
    setN(n=>n+1)
  };
  return(
    <div>
      这是儿子:n:{n}
      <button onClick={add}>+1</button>
    </div>
  )
}


ReactDOM.render(<App />,document.getElementById('root'));

useReducer

作用：配合useContext做复杂的父子通信.
在 hooks 中提供了的 useReducer 功能，可以增强 ReducerDemo 函数提供类似 Redux 的功能，引入 useReducer 后，useReducer 接受一个 reducer 函数作为参数，reducer 接受两个参数一个是 state 另一个是 action 。然后返回一个状态 count 和 dispath，count 是返回状态中的值，而 dispatch 是一个可以发布事件来更新 state 的。

count.js

import React, { useReducer } from 'react'
import Add from '../../components/reduxStudy/Add'
import Jian from '../../components/reduxStudy/Jian'


// 处理函数
const reducer = (prevState, action) => {
  let newState = { ...prevState }
  if (action.type == 'add') {
    newState.count += 1
    return newState
  } else {
    newState.count -= 1
    return newState
  }
}
// 状态
const initState = {
  count: 1
}

const TestContext = React.createContext({})

export default function Count() {
  const [state, dispatch] = useReducer(reducer, initState)
  return (
    <TestContext.Provider value={{
      state,
      dispatch
    }}>
      <div>
        <Jian></Jian>
        <Add></Add>
      </div>
    </TestContext.Provider>
  )
}

export {
  TestContext
}

add.js

import React, { useContext } from 'react'
import { TestContext } from '../../views/reduxstudy/Count'



export default function Add() {
  const { state, dispatch } = useContext(TestContext)
  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => {
        dispatch({
          type: 'add'
        })
      }}>加</button>
    </div>
  )
}