Redux概述

Redux概述

Redux是一个用于JavaScript状态容器，提供可预测化的状态管理。
Redux可以构建一致化的应用，运行于不同的环境并且易于测试。

Redux三大核心

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

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

• 使用纯函数来执行修改
  为了描述action如何改变state tree，需要编写reducers。
  Reducers只是一个纯函数，它接收先前的state和action，并且返回新的state。可以复用，可以控制顺序，传入附加参数。

Redux组成

State状态

就是我们传送的数据。

Action事件

Action是把数据从应用传到store的载体，它是store数据的唯一来源，一般来说，我们可以通过store.dispatch()将action传递给store。
Action本质就是一个js对象，对象内部必须要有一个type属性来表示要执行的动作，多数情况下，type会被定义成字符串常量。但在项目中，更多会用action创建函数。
它只是描述了有事情要发生，并没有描述如何去更新state。

Reducer

Reducer本质就是一个函数，它用来响应发送过来的actions，经过处理，把state发送给Store。
在Reducer函数中，需要return返回值，这样Store才能接收到数据。
函数会接收两个参数，第一个参数是初始化state，第二个参数是action。

Store

Store就是把action与reducer联系到一起的对象。
主要职责：

• 维持应用的state
• 提供getState()方法获取state
• 提供dispatch()发送action
• 通过subscribe()来注册监听
• 通过subscribe()返回值来注销监听

流程

• 创建action对象（需要包含type属性）

const sendAction = ()=> {
    return {
        type:'send',
        value:'我是一个action'
    }
}

• 创建reducer处理（需要有返回值）

//创建reducer 纯函数 处理action
const initState = {
    value:'默认值'
}
const reducer = (state=initState.value,action)=> {
    //console.log('reducer:',state,action)
    switch (action.type) {
        case 'send':
            return action.value
        default:
            return state
    }
}

• 通过createStore()构建store接收reducer

//构建store
const store = createStore(reducer)
export default store

• 组件发送action对象
• 通过store.subscribe()监听获取新的状态getState()

export default class Home extends Component {
    handle = ()=> {
        //发送action对象
        const action = sendAction()
        store.dispatch(action)
    }
    componentDidMount() {
        //监听获取新的状态
        store.subscribe(()=> {
            //console.log('sub',store.getState())
            this.setState({})
        })
    }

    render() {
        return (
            <div>
                <button onClick={this.handle}>点我</button>
                <div>{store.getState()}</div>
            </div>

        )
    }
}

React-redux

react-redux是Redux官方给出的用于配合React的绑定库。
react-redux能够使React组件从Redux store中很方便的读取数据，并且向store中分发actions以此来更新数据。
react-redux有两个重要的组成部分：provider、connect。

Provider

Provider包裹在根组件最外层，使所有的子组件都能够拿到State。
Provider接收store作为props，通过context往下传递，这样react中任何组件都可以通过context获取到store。

connect

Provider内部组件如果想要使用到state中的数据，就必须要connect进行一层包裹封装，要被connect进行加强。
connect就是方便我们组件能够获取到store中的state。

流程

发送方：

import React,{Component} from "react";
import {connect} from "react-redux";

//发送方
class Index extends Component {
    handle = ()=> {
        //拿到并发送action
        console.log(this.props)
        this.props.sendAction()
    }

    render() {
        return (
            <div>
                <button onClick={this.handle}>+</button>
            </div>
        );
    }
}

//函数必须有返回值
//通过connext将方法的返回值传递给内部
const map = dispatch=> {
    return {
        sendAction: () => {
            dispatch({
                type:'add'
            })
        }
    }
}

//connect第一个括号参数第一个是接收的 第二个是发送的
//第二个括号是加强的组件
export default connect(null,map)(Index)

reducer：

const init = {
    count: 0
}

const reducer = (state = init,action)=> {
    switch (action.type) {
        case 'add':
            return {
                count:state.count+1
            }
        default:
            return state
}}

export default reducer

store:

import reducer from "./reducer";
import {createStore} from "redux";

const store = createStore(reducer)
export default store

provider：

function App() {
  return (
    <Provider store={store}>
        <div className="App">
            <Index/>
            <Hom/>
        </div>
    </Provider>
  );
}

接收方：

import React,{Component} from "react";
import {connect} from "react-redux";

class Hom extends Component {
    render() {
        return (
            <div>
                {this.props.count}
            </div>
        )
    }
}

const map = (state)=> {
    console.log(state)
    return state
}
//接收到更新的state
export default connect(map)(Hom)

效果：