初学redux、react-redux

redux是解决前端代码由于组件化引起的变量之间不能相互交互的的问题，readux是一个状态管理的仓库，阮老师说能不用redux就不用redux因为redux有时可能会出现卡顿现象。

上图过程值实现了从仓库中取出数据

react的特征主要时：

唯一数据源 应用的状态数据应该只存储在唯一的一个Store上，即 State 树。
保存状态只读 不能直接修改state的值，必须通过派发action对象完成。通过getState()获取值

3. 数据改变只能通过纯函数 这里的纯函数就是reducer，函数的返回结果必须有

过程：

1、想在仓库中初始话状态

import {createStore} from "redux";
const ADD = "ADD";
const SUB = "SUB";
let initState = {//初始化变量
    number:0,
    name: 'zs'
};
function reducer(state=initState,action) {
    switch (action.type) {
        case ADD:
            return {number:action.number+1}
        case SUB:
            return {number:action.number-1}
        case 'reset':
            console.log(111,action);
            return {name:action.name}
    }
    return state;
}
let store = createStore(reducer);//创建仓库
// window._store = store;
export default store

2、创建好仓库后获取仓库的变量，创库中的装填只能通过action修改才能保证创库中状态的安全性，在页面中创建了action后要把这个action通过dispatch派发给store的reducer进行处理，reducer会根据action的type进行判断然后做出不同的修改

import React from "react";
import store from "../store";
//组件更新 属性更新 状态更新,将redux中的数据转化成自己的状态
export default class Counter extends React.Component{
  
    add = ()=>{
        store.dispatch({type:'ADD',count:1})
      //通过dispatch派送方法把action对象派送到store中
    };
    minus = ()=>{
        store.dispatch({type:'MINUS',count:1})
    };
    render(){
        return (
            <div>
                <button onClick={this.add}>+</button>
                <p>{store.getState().number}</p>
                //通过store中的getState()方法获取store中的值
                <button onClick={this.minus}>-</button>
            </div>
        )
    }
}

这样的话对状态树中的值就修改完了。

也可以看一下这篇文章讲的挺好的https://juejin.im/post/5b83be86f265da432a6ae5df

在项目中只使用redux是不能实现状态的取和存这已完整的过程，使用redux只能完成从创库里面取出状态，要想实现另一半过程还要从把页面中的状态存到store中要用到react-redux

所有容器组件都可以访问 Redux store，建议的方式是使用指定的 React Redux 组件来包裹，让所有容器组件都可以访问 store

react-redux主要时通过connect把组件与仓库连接起来，connect中有四个参数，

connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {})

第一个参数的意思时从仓库中映射到逐渐

function mapStateToProps(state) {
      return { todos: state.todos }
//todos是组件中的变量，state.todos是仓库中的变量
    }

第二个参数是派发到Props，也就是派发动作到仓库

第三个参数mergeProps如果不指定，则默认返回 Object.assign({}, ownProps, stateProps, dispatchProps)，顾名思义，mergeProps是合并的意思，将state合并后传递给组件。

第四个参数：options：通过配置项可以更加详细的定义connect的行为，通常只需要执行默认值。

可以参考https://juejin.im/post/5acb67fef265da23a049de90

初学redux、react-redux

猜你喜欢