redux + react-redux

react-redux提供两个核心的api：

• Provider: 提供store <Provider store = { store }><App /></store>

• connect: 用于连接容器组件和展示组件

  • Provider

    根据单一store原则 ，一般只会出现在整个应用程序的最顶层。

  • connect

    语法格式为

    connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)(component)

    一般来说只会用到前面两个，它的作用是：

    • 把store.getState()的状态转化为展示组件的props

    • 把actionCreators转化为展示组件props上的方法

只要上层中有Provider组件并且提供了store, 那么，子孙级别的任何组件，要想使用store里的状态，都可以通过connect方法进行连接。如果只是想连接actionCreators，可以第一个参数传递为null

npm i react-redux -S

此项目用rtk操作，rtk创建项目参照 rtk搭建项目流程

没有接触过redux也可以先浏览浅谈redux

1、创建状态管理器

import { createStore } from 'redux'

const reducer = (state = {
    count:1,
    msg:"样式小吧"
},{ type,payload } ) => { // action 解构了
    switch(type) {
        case 'CHANGE_COUNT':
            return { ...state,count:payload }
            // ...写法
        case 'CHANGE_MSG':
            return Object.assign({},state,{ msg:payload }) 
            // assign 写法
        default:
            return state
    }
}

const store = createStore(reducer)

export default store

1)、引入 createStore 方法（新版本中建议使用rtk）

2)、创建reducer（包含初始化状态，包含了修改状态的标识，返回了新的状态（对象合并））

3)、创建store

4)、暴露store

2、使用react-redux

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入状态管理器
import { Provider } from 'react-redux'
import store from './redux-react_redux/store'
import App from './App' // hooks useState

const root = ReactDOM.createRoot(document.getElementById('root'))

// 标签形式调用
root.render(
  <Provider store = { store }>
    <App/>
  </Provider>
)

使用了 react-redux 提供的组件组件 Provider 配合 store 完成传递数据

3、组件内使用

import React from 'react';
// 引入connect高阶组件，实际上connect返回值才是告诫组件
import { connect } from 'react-redux'
const App = (props) => {
  console.log(props)
  const {count,dispatch} = props
  
  return (
    <div>
      <h1>redux + react-redux</h1>
      { count }
      <button onClick={() => {
        dispatch({
          type:'CHANGE_COUNT',
          payload:100
        })
      }}>点击切换</button>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    count:state.count
  }
}

export default connect(mapStateToProps)(App);

注：以上即可通过状态管理器进行切换count值，当然了，redux + react-redux也可以分模块使用，只需要把图1分文件写，然后一个文件进行引入，引入需要用到一个combineReducers

即可完成分模块状态管理器创建

import { combineReducers, createStore } from 'redux'
import home from './modules/home'
import kind from './modules/kind'

const reducer = combineReducers({
  home,
  kind
})

const store = createStore(reducer)

export default store