redux工作流程讲解+小例子

文章介绍

你好！这篇文章是通过点击按钮在输入框中完成加一减一的小例子，使读者能够轻松理解redux的工作流程

Redux介绍

redux是一个专门用于做数据状态管理的JS库，提供了可预测的状态管理

Redux安装

1.npm install --save redux
2.npm install --save react-redux	

Redux三大原则

• 单一数据源：整个应用的state被储存在一棵Object tree中，并且这个Object tree只存在唯一一个store中
• state是只读的：唯一改变state的方法是触发action
• 使用纯函数进行修改：为了描述action如何改变state tree，需要编写reducer

什么时候使用redux

• 总原则：能不用就不用
• 共享：某个组件的状态，需要让其他组件随时可以拿到
• 通信：一个组件需要改变另一个组件的状态

Redux的工作流程

• React Component:为UI组件,也就是我
• store：存储了所有的状态(state)，也就是最初的状态
• Action：改变store的状态，也就是表达出想法，和应该执行的做法，但并未付出行动
• reducers：reducer根据接收Action和状态数据来产生一个新的store，也就是付出行动了

代码理解

第一步：
1.Provider组件：可以让容器组件拿到State，下面代码中Provider在根组件外面包了一层，App的所有子组件默认都可以拿到state，好比说你看电视剧需要看广告，有了个Provider你就可以直接看电视剧的感觉，给你的容器组件充了个VIP

***index.js***
import React, {
     Component } from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'
import {
     Provider } from 'react-redux';
import store from './store'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={
    store}>
    <App />
  </Provider>
)

第二步
1.我们要编写容器组件中的内容,一个输入框，两个按钮

***App.js***
import React, {
     Component } from 'react';
class App extends Component {
    
  constructor(props) {
    
    super(props);
  }
  render() {
     
    return ( 
      <div>
          <input />
          <button>+</button>
          <button>-</button>
      </div>
    );
  }
}
 
export default App;

2.我们想要定义输入框中数字的初始值

***store.js***
import {
    createStore} from 'redux'
const initState = ({
    
    AppValue:{
    
        value:10
    }
})
export default createStore(initState)

3.mapStateToProps()是一个函数，建立一个从(外部的)到state对象到(UI组件)props对象的映射关系，input最开始值设置为了10

***App.js***
import React, {
     Component } from 'react';
class App extends Component {
    
  constructor(props) {
    
    super(props);
  }
  render() {
     
    return ( 
      <div>
          <input value={
    this.props.value}/>
          <button>+</button>
          <button>-</button>
      </div>
    );
  }
}
const mapStateToProps  = (state) => ({
    
  value:state.AppValue.value
})
export default App;

第三步
1.单独定义出来，就有点像定义变量

***actionType.js***
export const ADDVALUE = 'add';
export const SUBVALUE = 'sub';

2 表达出想法，和应该执行的动作，我原本state数据为10，我想加一，减一，type就是表达想法，data就是应该执行的动作

***action.js***
import * as actionTypes from './actionType'
export const Add = (data) => {
    
    var addData = data + 1;
    return {
    
        type:actionTypes.ADDVALUE,
        data:addData
    }
}
export const Sub = (data) => {
    
    var subData = data - 1;
    return {
    
        type:actionTypes.SUBVALUE,
        data:subData
    }
}

3 mapDispatchToProps它定义了哪些用户的操作应该当作action，传递给store,并且在button上绑定上它

***App.js***
import React,{
    Component} from 'react';
import * as Action from './store/action';
import {
    connect} from 'react-redux';
class App extends Component {
    
    constructor(props) {
    
        super(props);
    }
    render() {
    
        return (
            <div>
                <input value={
    this.props.value}  style={
    {
    marginRight:'5px'}} />
                <button onClick={
    () => this.props.add(this.props.value)} style={
    {
    marginRight:'5px'}}>+</button>
                <button onClick={
    () => this.props.sub(this.props.value)}>-</button>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    
    value:state.AppValue.value
})
const mapDispatchToProps = (dispatch) => ({
    
    //加一
    add(data) {
    
        dispatch(Action.Add(data))
    },
    //减一
    sub(data) {
    
        dispatch(Action.Sub(data))
    }
})
export default connect(mapStateToProps,mapDispatchToProps)(App);

4想法和原始状态都有了，该执行了，将想法和原始状态传给reducer，然后返回一些新数据

***reducer.js***
import * as actionTypes from './actionType'
const reducer = (state = {
    },action) => {
    
    switch(action.type) {
    
        case actionTypes.ADDVALUE:{
    
            return {
    ...state,value:action.data}
        }
        case actionTypes.SUBVALUE:{
    
            return {
    ...state,value:action.data}
        }
        default:{
    
            return state;
        }
    }
}
export default reducer;

5 新的数据替换掉了旧的数据，并展示在页面上了

import {
    combineReducers, createStore} from 'redux'
import AppReducer from './store/reducer'
const reducer = combineReducers({
    
    AppValue:AppReducer
})
const initState = ({
    
    AppValue: {
    
        value:12
    }
})
export default createStore(reducer,initState)

biu~ biu~

希望这篇文章对你有所帮助，如有什么问题和错误都可以私信我哈，一定会及时整改，如果有什么不理解的地方，也可以私信我，我会竭尽所能的帮助大家。