redux与react-redux使用

redux

1、Redux是为javascript应用程序提供一个状态管理工具集中的管理react中多个组件的状态redux是专门作状态管理的js库（不是react插件库可以用在其他js框架中例如vue，但是基本用在react中）

2、需求场景：

某个组件的状态需要共享的时候

某个组件的状态需要在任何地方都可以拿到

一个组件需要改变全局状态

一个组件需要改变另一个组件的状态

3、redux三大原则

1、单一数据源:整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中

2、State 是只读的:唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

3、使用纯函数来执行修改:为了描述 action 如何改变 state tree ，你需要编写 reducers(一些纯函数，它接收先前的 state 和 action，)

4、redux常用概念

1、Store：管理着整个应用的状态，可以通过getState()来重新获得最新的状态(state)。

2、Action：是唯一可以改变状态(state)的方式，服务器的各种推送、用户自己做的一些操作，最终都会转换成一个个的Action，而且这些Action就是修改的动作，可以通过dispatch()方法来进行调用

、Reducer：Reducer 是一个纯函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。（纯函数就是只要传入相同的参数，每次都应返回相同的结果）。

5、redux常用方法

1、createStore（）作用：创建一个Redux store来存放应用中所有的state，一个应用只能有个store。函数返回store对象。

2、getState()作用：获取数据

3、dispatch()分发action，这是改变state的唯一方法。

4、subscribe()添加一个变化监听器，每当改变store的时候就会执行

使用

下载：npm install --save redux

建议：在项目中创建一个sotre文件夹用来保存与redux相关的内容

在store中创建index.js

在src下的index.js中使用

读取数据

// 1\引用
import {createStore} from "redux"

// 4\创建默认数据
let data={
    name:"dsfs",
    age:11
}

// 5、创建reducer用来汇总数据和数据处理操作
let reducer=(state=data,actions)=>{
    return state
}

// 2、创建store 对象、6\吧reducer传递到store
let store =createStore(reducer)

// 3、暴露
export default store

#### 组件中调用

import React, { Component } from 'react'
import store from "../store/index"
export default class demoa extends Component {
    constructor(props){
        super(props)
        this.state={
            storename:store.getState().age
        }
    }
    render() {
        return (
            <div>
                demoa
        <h1>{this.state.storename}</h1>
            </div>
        )
    }

}

#### 修改操作

1 、

<button onClick={this.add.bind(this)}>+1</button>
<button onClick={()=>{this.red()}}>-1</button>

2、

add(){
        // 调用actions进行修改操作的分发任务
        store.dispatch({type:"ADD",num:3})
 }
 
 red(){
        store.dispatch({type:"DEL",num:5})

    }

3、
、创建reducer用来汇总数据和数据处理操作

let reducer=(state=data,actions)=>{
    switch (actions.type) {
        case "ADD":
            return {...state,age:state.age+actions.num}
            break;
        case "DEL":
            return {...state,age:state.age-actions.num}
            break;
        default:
            return state
            break;
    }
}
   

4、
// 监听redux 中的数据变化从而触发render渲染进行数据修改

  componentDidMount(){
        store.subscribe(()=>{
            this.setState({
                storeage:store.getState().age
            })
        })
    }

## redux封装
// 封装我的dispaths的任务派发

// 封装我的dispaths的任务派发
import {DEMOADD,DEMODEL} from "./actionname"

let demoadd=(num)=>{
    return {type:DEMOADD,num}
}
let demodel=(num)=>{
    return {type:DEMODEL,num}
}

export default {
    demoadd,
    demodel
}

// 封装任务名

// 封装任务名
export const DEMOADD="ADD"
export const DEMODEL="DEL"

// 合并reducer

// 合并reducer
import {combineReducers} from "redux"
import demoaReducer from "../components/demoaReducer"
// 开始合并
let reducer = combineReducers({
    demoaReducer
})

export default reducer

store index.ls

import reducer from "./reducerAll"
import {createStore} from "redux"
// 2、创建store 对象、6\吧reducer传递到store
let store =createStore(reducer)

// 3、暴露
export default store

react-redux

react-redux插件

一个react的插件
专门用来简化react应用中使用redux

npm install --save react-redux

react-redux常用概念

组件：把 store 提供给其子组件

connect 高阶组件:链接 链接react组件和redux（组件状态要从redux中获取）

react-redux使用

在index.js中 创建Provider

import {Provider} from "react-redux"
import store from "./store"


  <Provider store={store}>
  <Home/>
  </Provider>,

在需要使用数据的组件中

react-redux使用

形参数是state的数据 当前函数必须return一个对象

import {connect} from "react-redux"

取值{this.props.state.demoaReducer.age}

export default connect(state=>({state}))(demoa)