redux一步一步的使用

1.redux的意义

redux-----我觉得就是一个 小型数据库
这个数据库保存的数据可以在全组件调用
产生原因:
因为组件传值不是很方便
大家走知道 组件存在传值的操作
如果父子传值还好
就怕多层传值 以及兄弟传值
数据来回的传递

为了解决这个多组件 跨组件的传值问题 出现了redux
把redux 独立出来一个仓库store 这个数据所有组件都可用都可改变
这样多层的父子传值就解决了

2.redux下载

npm i redux
1

3.在react项目中使用

npm i create-react-app

create-react-app appName
1
2
3

4.加载redux的store

store.js

import {createStore} from "redux"
const store1=createStore(/*这里需要一个处理函数 函数有数据和数据操作*/)
export default store1
1
2
3

5.加载redux的store所需的数据和数据操作

//2.函数参数的数据
const initstate={
    count:0
}

//1.抛出函数
const  reduxdatafn=(state=initstate,action)=>{
    //3.根据action 组件会触发dispath 执行不同操作
    switch (action.type) {
        case "addCount":
            return {
                ...state,
                count: state.count + 1
            }

        case "reduceCount":
            return {
                ...state,
                count: state.count - 1
            }
        default:
            return state
    }
}
export default reduxdatafn
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

6.store和reduxdatafn绑定

import {createStore} from "redux"
import reduxdatafn from "./reduxdatafn.js"
const store1=createStore(reduxdatafn/*这里需要一个处理函数 函数有数据和数据操作*/)
export default store1
1
2
3
4

7.创建行为action

export const addCount=()=>{
    return {
        type:"addCount"
    }
}
export const reduceCount=()=>{
    return {
        type:"reduceCount"
    }
}
1
2
3
4
5
6
7
8
9
10

8.在组件中使用

import React, {Component} from 'react';
//第一步引入 store
import store from "./store";
//4引入action 统一管理
import {addCount,reduceCount} from "./actions"
class ReduxManager extends Component {
    add=()=>{
        let actions=addCount()//返回对象{type:xx}
        //激活redux的数据修改
        store.dispatch(actions)
    }
    reduce=()=>{
        let actions=reduceCount()//返回对象{type:xx}
        //激活redux的数据修改
        store.dispatch(actions)
    }
    render() {
        return (
            <div className='ReduxManager'>
                //2.通过store.getState()获取数据
                reduxManager.jsx的管理{store.getState().count}
                //3.通过事件修改数据
                <button onClick={this.add}>增加</button>
                <button onClick={this.reduce}>减少</button>
            </div>
        );
    }
}

export default ReduxManager;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

9.执行实时的渲染

componentDidMount() {
   store.subscribe(()=>{
         this.setState({})
     })
 }
1
2
3
4
5

10.通用设置实时的渲染

root.render(
    <Router>
        <App />
    </Router>
);
//设置实时的渲染
store.subscribe(()=>{
    root.render(
        <Router>
            <App />
        </Router>
    );
})
1
2
3
4
5
6
7
8
9
10
11
12
13

11其他页面 使用方法同上