Redux的基本使用，从入门到入土

目录

一、初步使用Redux

1.安装Redux

2.配置状态机

二、Redux的核心概念

1.工作流程

2.工作流程

 三、优化Redux

1.对action进行优化

2.type常量

3.reducer优化

四、react-redux使用

1.安装react-redux

2.全局注入store仓库

3.组件关联仓库

五、状态机的Hook

1.useSelect

2.useDispatch

3.redux-devtools

六、redux中间件（难点）

1.安装依赖包

2.引入使用

七、拆分reducer

一、初步使用Redux

1.安装Redux

npm i redux

2.配置状态机

//1.创建store仓库
import {legacy_createStore as createStore} from 'redux'
const store = createStore()//2.保存数据到store中
//createStore方法接收一个函数作为参数，该函数的返回值会保存到store中
const store = createStore((state=数据初始值)=>{return state
})
//3.查看仓库数据
console.log(store.getState())

二、Redux的核心概念

1.工作流程

• 在store仓库中定义初始化的数据
• 组件中使用store.getState()获取到仓库的定义的数据，store中会自带dispatch方法（该方法中会有一个返回值，此返回值为action对象），通过store.dispatch()方法将定义好的数据传给store
• action是一个通知对象（该对象中必须要有一个type属性，其他属性可以任意添加）
• store中createStore有两个参数：createStore(参数一，参数二)
• 参数二可以接收到组件传过来的数据
• 参数一是一个回调函数，可以简单理解为处理初始数据的reducer，store仓库通过reducer进行数据处理，并且再将处理后的值返回给reducer
• 此时组件中的值也会随之发生变化。形成闭环功能

2.工作流程

• state
  • state:状态，就是我们传递的数据
• action
  • action是一个通知对象，里面必须有一个type属性，表示当前通知的类型，至于其他属性，你可以任意添加
  • 可以通过store.dispatch(action对象)来更新仓库中的数据
• reducer
  • reducer本质是一个函数，它用来响应发送过来的actions,经过处理把state发送给store
  • reducer函数中，需要return返回值，这样store才能接收到数据
  • reducer函数接收两个参数，第一个参数是初始化store,第二个参数是action
• store
  • 数据仓库，存放组件数据的地方。一个项目一般只有一个数据仓库,store可以把action和reducer联系在一起
  • 主要的职责
    • 维护应用的state
    • 提供getState()方法获取state
    • 提供dispatch()方法发送action
    • 通过subscribe()来注册监听
    • 通过subscribe()返回值来注销监听

 三、优化Redux

1.对action进行优化

将每一个action单独封装，返回一个对象，该对象有type属性和其他自定义属性

思路：从根父组件进行传值，子组件接收值再传给action

2.type常量

新建js文件，将大量使用的字符串在此定义，组件可引入直接使用定义的变量，方便代码维护

3.reducer优化

将reduce单独封装，state为对象，可定义多个初始数据

四、react-redux使用

1.安装react-redux

yarn add redux
yarn add react-redux
//必须先安装redux插件

2.全局注入store仓库

//导入
import {Provider} from 'react-redux'
//将跟组件App进行包裹
//Provider中自带store属性，参数store为创建的store仓库文件
root.render(<Provider store={store}><App /></Provider>
);

3.组件关联仓库

react-redux提供了connect方法，用于从UI组件生成容器组件

import React from 'react'
import { connect } from 'react-redux'function Counter() {render() {return (<div></div>)}
}
export default connect()(Counter)//connect是一个高阶组件，该组件中内部还有一个函数，所以写法为connect()()
//第二个方法写入创建的函数组件名称
//第一个方法是一个回调函数，此函数自带一个参数，该参数是从store仓库获得到的数据，在该回调函数中返回一个对象，该对象会和组件的props进行合并
const mapStateToProps = (state) => {return {数据名: 从 state 中获取的数据值}
}
export default connect(mapStateToProps)(Counter);定义好之后就可以在组件的prop访问到对应的store仓库数据
function Counter(props)render() {return (<div><h1>计数器</h1><h2>{props.数据名}</h2></div>)}
}console.log(props) //仓库的初始数据，父组件传递的数据，dispatch方法

五、状态机的Hook

1.useSelect

import {useSelect} from 'react-redux;
export default App(){const list = useSelect((state)=>{return state})
}//state:store仓库中所有的初始数据

2.useDispatch

import {useDispatch} from 'react-redux'
export default App(){const dispatch = useDispatch()dispatch(action对象)
}

3.redux-devtools

安装依赖包

yarn add redux-devtools-extension

import {legacy_createStore as createStore} from 'redux'
import counterReducer from './reducer/counterReducer'
import {composeWithDevTools} from 'redux-devtools-extension'
const store=createStore(counterReducer,composeWithDevTools())
export default store
//createStore中的第二个参数可以设置为composeWithDevTools，在浏览器中装入扩展程序即可使用
//也可以不写

六、redux中间件（难点）

简单理解就是自己封装一个方法，该方法中有两个参数，第一个参数为dispatch，第二个参数为getState。但是最终还是用react的dispatch发起状态更新，dispatch(封装的方法)，这样即可完成react的中间件

1.安装依赖包

//logger为记录日志用的，可以在控制台更清楚地观察到状态的变化
yarn add redux-logger
//thunk提供一种特性，即可以接受dispatch可以接受一个函数为参数
//也是实现封装的一个最重要的中间件
yarn add redux-thunk

2.引入使用

import {legacy_createStore as createStore,applyMiddleware} from 'redux'import thunk from 'redux-thunk'
import logger from 'redux-logger'//在根元素上使用，必须使用applyMiddleware引用
createStore(reducers,composeWithDevTools(applyMiddleware(thunk,logger)))

七、拆分reducer

当项目中需要使用到两个或多个reducer时，但是在createStore中只能写一个reducer，此时就需要将reducer模块化，更方便管理多个reducer

import {combineReducers} from 'redux'import counterReducer1 from './counterReducer1'
import counterReducer2 from './counterReducer2'const reducers = combineReducers({reducer1:counterReducer1，reducer2:counterReducer2
})createStore(reducers,composeWithDevTools(applyMiddleware(thunk,logger)))

同时在组件中使用也得进一步调整

//原本
const list = useSelector((state) => {return state.shopCartList;
});//现在
const list = useSelector((state) => {return state.reducer1.shopCartList;
});