redux创建过程

水深无声 2021-07-24 14:42 444阅读 0赞

# redux创建过程 #

## 1. 读取数据： ##

1.  创建文件夹存储redux内容  
    ![在这里插入图片描述][20190916203108936.png]
2.  设置数据  
    在提前创建好的redux文件夹中创建reducer.js用来创建reducer（对store修改操作）由于reducer需要接收state 和 action两个参数所以当作型参传入 并且给state数据（使用es6函数型参默认值的方式）

var obj=[
        {name:"xixi",age:19},
    ]
    
    export function data(state=obj[0].age,action){
       
    }

1.  3.设置数据处理返回结果（必须return）  
    由于action会有多种修改状态 每个action都有一个type(action的名字)所以使用switch来判断具体执行那个action

var obj=[
        {name:"xixi",age:19},
    ]
    
    export function data(state=obj[0].age,action){
        switch (action.type) {
            default:
                return state
                break;
        }
    }

1.  创建store  
    在redux文件夹中创建store.js中使用createStore这个函数，用来生成 Store管理着整个应用的状态

import { createStore } from "redux";
    var store=createStore();

1.  在store.js中引用写好的reducer文件 并且调用reducers.js文件中暴漏出的函数 data函数

import {data} from './reducer'
    export var store=createStore(data);

1.  在根index.js引用store.js 并且调用数据传递给组件

import { store } from "./redux/store"
    ReactDOM.render(<App store={store}/>, document.getElementById('root'));

1.  组件中使用（数据如果是个对象并不能直接显示所有所以需要显示所有要用便利的方式要不然直接在视图中使用会报错）

componentWillMount() {
            console.log(this.props.store.getState())
    }
    
       <p>{this.props.store.getState().name}</p>

## 2. 修改数据 ##

1.  在redux文件夹中创建action.js文件

// 增加
    export const add=(num)=>{
        return {type:"ADD",data:num}
    }
    
    // 减少
    export const del=(num)=>{
        return {type:"DEL",data:num}
    }

1.  在reducer.js添加action判断

var obj=[
        {name:"xixi",age:19},
    ]
    export function data(state=obj[0].age,action){
        switch (action.type) {
    
            case "ADD":
                return state+action.data;
            break;
            case "DEL":
                return state-action.data;
            break;
    
            default:
                return state;
                break;
        }
    }

1.  在根组件index.js中添加  
    使用subscribe来进行页面冲绘 页面就会重新调用（订阅页面监听store中的状态发生改变就会自动调用进行重新绘制）

import { store } from "./redux/store"
    ReactDOM.render(<App store={store}/>, document.getElementById('root'));
    
    store.subscribe(function(){
        ReactDOM.render(<App store={store}/>, document.getElementById('root'));
    })

1.  在页面中引用action.js (import \* as action星号是匹配符，匹配这个action的所有export function)

import * as action from "./redux/action"

1.  在组件中调用store 的dispatch(更新方法) (也就是调用那个active ) 并且传入data数据

<button onClick={()=>{this.props.store.dispatch(action.add(1))}} className="add">+1</button>
    <button onClick={()=>{this.props.store.dispatch(action.del(1))}} className="del">-1</button>

## 3. react-redux ##

1.  下载react-redux
2.  在根index.js中引用Provider组件

import {Provider} from "react-redux"

1.  由于provider组件可以可以让组件拿到state对象 所以不需要订阅监听渲染组件删除掉如下代码

store.subscribe(function(){
           ReactDOM.render(<App store={store}/>, document.getElementById('root'));
       })

1.  使用Provider组件来包裹app组件那么这样 app的子组件默人都可以拿到state 并且吧store对象传递给Provider组件中（组件：可以让组件拿到state（不需要使用传统的subscribe（）来监听state冲绘组件））

ReactDOM.render(  
         <Provider store={store}>
         <App/>
        </Provider>, 
        document.getElementById('root'));

1.  并且修改组件中的prop取值

*  添加和删除

<button onClick={()=>{this.props.add(1)}}>点我加1</button>
    <button onClick={()=>{this.props.del(1)}}>点我减1</button>

*  页面取值

{this.props.pagenum}

1.  新建containers.js来存放 connect（）方法来生成容器组件（connect():链接 链接react组件和redux（组件状态要从redux中获取））

//引用connect链接 链接react组件和redux 
    import {connect} from "react-redux"
    import {add,del} from "./action"
    //引用组件
    import Home from "../home"
    
    export default connect () (Home )

1.  在组件暴漏中传入参数 connect( )

//引用connect链接 链接react组件和redux 
    import {connect} from "react-redux"
    import {add,del} from "./action"
    //引用组件
    import Home from "../home"
    
    export default connect (
    // 返回对象使用（）包裹{pagenum:state}页面需要的参数,{add,del}页面需要的action方法
    (state)=> ({pagenum:state}) , {add,del}
    ) (Home )

1.  引用已经不是当前组件了而是引用containers中的reduxUI组件所以需要修改根index文件中APP组件路径

*  删除原有的地址

import Home from './home';

*  修改为

import Home from './redux/containers';

[20190916203108936.png]: /images/20210724/c59820aaaee14d7ebdb5cd216a74ad49.png