redux

redux是什么

• redux 专注于状态管理，和react解藕，vue ang都有
• 单一状态 单向数据流
• 核心 store state. action. reducer

通俗的解释

• react有一个容器(store)，保存了组件的所有状态。
• 状态需要改变的时候，告诉行为管理理员(dispatch)要干什么(action)
• 状态管理员(reducer)拿到state和action，生成新的state
• 状态获取新的state 渲染组件

使用方法

• 首先通过reducer新建store，随时通过store.getState获取状态
• 需要状态变更 通过store.dispatch(action)来修改状态
• reducer函数接收state和action，返回新的state，可以用store.subscribe监听每次的修改

react为什么使用redux

  没有使用redux的情况，如果两个组件(非父子关系)之间需要通信的话，可能需要多个中间组件为他们进行消息传递，
这样既浪费了资源，代码也会比较复杂。
  redux中提出了单一数据源Store 用来存储状态数据，所有的组建都可以通过Action修改Store，也可以从Store中获取最新状态。
使用了redux就可以完美解决组建之间的通信问题

redux 设计三大原则：

store是唯一的
只有store能够改变自己的内容
reducer必须是纯函数

redux 核心API

createStore -- 创建一个store 
store.dispatch -- 派发action
store.getState -- 获取到store里面所有的数据内容
store.subscribe -- 订阅store的改变，只要store发生改变，store.subscribe接收的回调函数就会被执行

------------ redux-saga --------------

redux-saga是一个用于管理redux应用异步操作的中间件，
redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，
可以用来代替redux-thunk中间件。
流程：

------------ react-redux ------------

React-Redux是Redux的官方React绑定库。
它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据
dispatch(action)派发->store->转发给reducer->reducer处理完数据后返回一个新的数据

• Provider和connect
  React-Redux 提供组件，能够使你的整个app访问到Redux store中的数据，每个内部组件都可以使用Provider

import React from 'react';
import ReactDOM from 'react-dom';
import ReactReduxComponent from "./ReactReduxComponent";
import {Provider} from 'react-redux'
import store from './reactreduxstore'
const App = (
    
       
    
)
ReactDOM.render(App, document.getElementById('root'));

• React-Redux提供一个connect方法能够让你把组件和store连接起来。connet将UI组件和数据结合起来，返回的内容就是一个容器组件

import React from 'react'
import {connect} from 'react-redux'
const ReactReduxComponent = (props)=>{
    const {list,inputValue,handleChangeInputValue,handleClick,handleDelete} = props
    return (
        

            

                
                提交
            
            

                {
                    list.map((item,index)=>{
                        return 
handleDelete(index)} key={index}>{item}
                    })
                }
            
        
    );
}
//state 指的是store里面的数据 通过mapStateToProps映射到组件的props里面
const mapStateToProps = (state)=> {
    return {
        inputValue: state.inputValue,
        list:state.list
    }
}
//通过mapDispatchToProps 方法，store.dispatch方法被影射到props中去，通过dispatch 把action转发给reducer
const mapDispatchToProps = (dispatch)=>{
    return{
        handleChangeInputValue(e){
            const action = {
                type:'change_input_value',
                value:e.target.value
            }
            dispatch(action)
        },
        handleClick(){
            const action = {
                type: 'add_item'
            }
            dispatch(action)
        },
        handleDelete(index){
            const action = {
                type:'item_delete',
                index
            }
            dispatch(action)
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(ReactReduxComponent);

• reducer类里的数据处理

const defaultState = {
    inputValue:'',
    list:[]
}
export default (state = defaultState,action)=>{
    if (action.type === 'change_input_value') {
        const newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    if (action.type === 'add_item') {
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    if (action.type === 'item_delete') {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index,1)
        return newState
    }
    return state;
}