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;
}

你可能感兴趣的:(redux)