redux与react-redux
foreword
At work, Vue is the mainstay, and the use of React is getting rusty, and I can only use redux to the point of being able to use it. Occasionally, I come across a React project. Using redux means rewriting what others have written. Recently, I had time to visit the React tutorial for free at Bilibili . Write a note and record it! ! !
1. What are redux and react-redux?
Redux is a JavaScript state container that provides predictable state management. It is an independent library that can be used with UI frameworks.
Slightly different from redux, react-redux is React's official Redux UI binding library. The process of subscribing to store, checking for updated data and triggering re-rendering can become more general and reusable.
To put it simply, react-redux still uses redux to fetch data in the end, but it encapsulates an api that is convenient for using redux.
Compared with the simple brainless operation of Vuex, these two are a little troublesome. However, Alibaba later encapsulated a hox, which feels much easier to use.
2. Redux usage steps
1. Import library
The code is as follows (example):
npm install redux
2. Schematic
actions
1) Meaning
Actions are payloads that pass data from the application to the store. It is the only source of store data. Generally you pass the action to the store via store.dispatch().
action返回的是Object类型的叫做同步action
action返回的是Function类型的叫做异步 action
异步action:
(1).明确：延迟的动作不想交给组件自身，想交给action
(2).何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回（非必须）
(3).具体编码：
1).cnpm i redux-thunk，并配置在store中，//行驶转换程序
2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务
3).异步任务有结果后，分发一个同步的action去真正的操作数据
(4).备注：异步action不是必须要写的，完全可以自己等待异步任务的结果再去分发同步action
2）demo
//redux文件夹下新建constant.js文件
/* 该模块适用于定义action对象中type类型的常量值
目的只有一个：便于管理的同时防止单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
export const SET_OPERATOR = 'setOperator'
//redux文件夹下新建action文件夹
//action下新建count_actions.js
/*
该文件专门为Count组件生成求和count_actions对象
*/
import {
INCREMENT, DECREMENT} from '../constant'
export const incrementAction = (data) => ({
type: INCREMENT, data })//同步action
//同步action，就是指action的返回值为Object类型的一般对象
export function decrementAction(data){
return {
type: DECREMENT,
data
}//返回的是一个对象，普通数据类型，同步action，返回对象为异步
}
//异步action，就是指action的返回值为函数
//异步action中，一般都会调用同步action，异步action不是必须要用的
export const incrementAsyncAction = (data, time) => {
return (dispatch)=>{
//返回对象为异步action
setTimeout(()=>{
dispatch(incrementAction(data))
}, time)
}
}
//action下新建user_action.js
import {
SET_OPERATOR } from '../constant'
export function setOperator(data){
return{
type: SET_OPERATOR,
data,
}
}
store.js
1) Meaning
store is a state manager, a warehouse that stores public state data. Redux apps have a single store
1）引入redux中的createStore函数，创建一个store
2）createStore调用时要传入一个为其服务的reducer
3）记得暴露store对象
4) redux只负责管理状态，至于状态的改变驱动着页面的展示要靠我们自己写
2）demo
//redux文件夹新建store.js
//引入creacteStore,专门用于创建redux中最核心的store对象,applyMiddleware执行中间件
import {
legacy_createStore as createStore, applyMiddleware} from "redux";
//引入redux-thunk用于支持异步action
import thunk from 'redux-thunk'
//引入为组件服务的reducer
import rootReducers from './reducers'
const store = createStore(rootReducers, applyMiddleware(thunk))
//暴露出去
export default store
reducer.js
1) Meaning
Reducers specify how changes in the application state are sent to the store in response to actions. Remember that actions only describe the fact that something happened, not how the application updates the state.
1）reducer的本质是一个函数，接收：preState,action,发布加工后的状态
2）reducer有两个作用：初始状态，加工状态
3）reducer被第一次调用时，是store自动触发的，传递的preState是undefined
2）demo
//redux文件夹下新建reducers文件夹
//新建count_reducer.js
import {
INCREMENT, DECREMENT} from '../constant'
//监测提交过来的action，preState是前一条数据，初始化时默认为0
const counter = (preState = 0,action)=>{
const {
type, data}= action
switch(type){
case INCREMENT:
return preState + data;
case DECREMENT:
return preState - data;
default:
return preState;
}
}
export default counter;
//redux文件夹下新建reducers文件夹
//新建user_reducer.js
import {
SET_OPERATOR } from '../constant'
const operator = (preState = {
}, action)=>{
const {
type, data}= action
switch(type){
case SET_OPERATOR:
return Object.assign(preState, data);
default :
return preState
}
}
export default operator;
//redux文件夹下新建reducers文件夹
//新建index.js
import {
combineReducers } from 'redux';
import counter from './count_reducer';
import operator from './user_reducer'
// 合并多个 reduce
const rootReducers = combineReducers({
counter:counter,
operator:operator
});
export default rootReducers;
Count.jsx
1) Meaning
Operation component, which contains two functions of data addition and subtraction, and data assignment
2）demo
import React, {
Component } from 'react'
import store from '../../redux/store'
//引入actionCreator，专门用于创建action对象
import {
incrementAction, decrementAction, incrementAsyncAction} from '../../redux/actions/count_actions'
import {
setOperator } from '../../redux/actions/user_action'
class Count extends Component {
state = {
}
//加
increment=()=>{
const {
value}=this.selectNumber
store.dispatch(incrementAction(value*1))
}
//减
decrement=()=>{
const {
value } = this.selectNumber
store.dispatch(decrementAction(value*1))
}
//当前求和的数据为奇数再加
incrementIfOdd=()=>{
const counter = store.getState().counter
const {
value } = this.selectNumber
if(counter % 2 !== 0) {
store.dispatch(incrementAction(value*1))
}
}
//异步加
incrementAsync=()=>{
const {
value } = this.selectNumber
// setTimeout(()=>{
store.dispatch(incrementAsyncAction(value*1, 3000))
// }, 2000)
}
addUserInfo = () => {
const operator = {
name: '大黄'+Math.floor(Math.random()*100),
age: Math.floor(Math.random()*100)
}
store.dispatch(setOperator(operator))
}
render() {
console.log(store.getState())
const counter = store.getState().counter
const operator = store.getState().operator
return (
<div>
<h1>当前求和为{
counter}</h1>
<select ref={
c=>this.selectNumber =c}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick={
()=>{
this.increment()}}>+</button>
<button onClick={
()=>{
this.decrement()}}>-</button>
<button onClick={
()=>{
this.incrementIfOdd()}}>如果为奇数</button>
<button onClick={
()=>{
this.incrementAsync ()}}>异步增加 </button>
<div>
<button onClick={
()=>{
this.addUserInfo()}}>添加用户信息</button>
<div style={
{
display: operator?.name ? 'block' : 'none'}}>姓名：{
operator?.name},
年龄：{
operator?.age}</div>
</div>
</div>
)
}
}
export default Count;
//App.js
import Count from './components/Count'
function App() {
return (
<div className="App">
<Count/>
</div>
);
}
export default App;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import store from './redux/store'
import App from './App';
import {
Provider} from 'react-redux'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={
store}>
<App />
</Provider>
);
// 监听数据变化
store.subscribe(() => {
root.render(
<Provider store={
store}>
<App />
</Provider>
);
})
Summarize
The code is smooth, and it should be okay to write a simple demo according to the official idea. There are a lot of things, react-redux has another article.