Redux 一步到位

简介

Redux 是 JavaScript 状态容器，提供可预测化的状态管理
Redux 除了和 React 一起用外，还支持其它库（ jquery ... ）
它体小精悍（只有2kB，包括依赖）
由 Flux 演变而来，但受 Elm 的启发，避开了 Flux 的复杂性。

安装

稳定版 npm install --save redux
附加包 React 绑定库 npm install --save react-redux
附加包开发者工具 npm install --save-dev redux-devtools

创建 reducer.js

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。惟一改变 state 的办法是触发 action，一个描述发生什么的对象。为了描述 action 如何改变 state 树，先编写 reducers。

const defaultState = {}

export default (state = defaultState,action)=>{

    return state

}

创建 Store

import { createStore } from 'redux'

import reducer from './reducer'

const store = createStore(reducer)

export default store

使用 createStore 创建数据储存仓库
将 store 暴露出去

获取 store

组件来获取 store 中的数据

import store from './store'

// ...

constructor(props){

    super(props)

    console.log(store.getState())

}

先引入store
使用 getState 函数获取数据

安装 Redux DevTools

chrome 搜索插件 Redux DevTools 并安装

 import { createStore } from 'redux'

 import reducer from './reducer'

 const store = createStore(reducer,

+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

 export default store

只是添加了一句话
意思是看window里有没有这个方法，有则执行这个方法
启动项目就可以看到 State 了

Action

Action 是 store 数据的唯一来源。

创建 action

const action ={

        type:'',

        value: ''

    }

store.dispatch(action)

type 字段来表示将要执行的动作(必须要有)
除了 type 字段外，action 对象的结构完全自由
使用 dispatch 函数发送数据到 store

更改 Reducer

export default (state = defaultState,action)=>{

    if(action.type === 'changeInput'){

        let newState = JSON.parse(JSON.stringify(state)) //深度拷贝state

        newState.inputValue = action.value

        return newState

    }

    return state

}

先判断type是否正确，如果正确，声明一个变量newState
Reducer 里只能接收 state，不能改变 state，所以将新变量 return

更新组件数据

constructor(props){

    // ...

    storeChange(){

     this.setState(store.getState())

    }

    this.storeChange = this.storeChange.bind(this)

    store.subscribe(this.storeChange)

}

bing(this) 转变this指向
storeChange 重新setState
subscribe 函数用来订阅 store 状态

小技巧

抽离 Action Types

使用单独的模块或文件来定义 action type 常量并不是必须的，甚至根本不需要定义。对于小应用来说，使用字符串做 action type 更方便些。不过，在大型应用中把它们显式地定义成常量还是利大于弊的。

actionTypes.js

const ADD_TODO = 'ADD_TODO';

const REMOVE_TODO = 'REMOVE_TODO';

const LOAD_ARTICLE = 'LOAD_ARTICLE';

组件中引用

import { ADD_TODO , REMOVE_TODO , LOAD_ARTICLE } from './store/actionTypes'

相应的 Reducer 也要更改

import { ADD_TODO , REMOVE_TODO , LOAD_ARTICLE } from './store/actionTypes'

const defaultState = {}

export default (state = defaultState,action)=>{

    if(action.type === ADD_TODO){

        let newState = JSON.parse(JSON.stringify(state))

        newState.inputValue = action.value

        return newState

    }

    // ...

    return state

}

抽离 Redux Action

Action 创建函数就是生成 action 的方法。注意与 action 概念相区分。

function addTodo(text) {

  return {

    type: ADD_TODO,

    text

  }

}

actionCreators.js

function addTodo(text) {

  return {

    type: ADD_TODO,

    text

  }

}

组件中使用

import { addTodo } from './actionCreators';

// ...

dispatch(addTodo('Use Redux'))

注意

store 必须是唯一的
只有store能改变自己的内容，Reducer不能改变
Reducer必须是纯函数

拆分组件UI和业务逻辑

TodoListUI.js

import React, { Component } from 'react';

class TodoListUi extends Component {

    render() {

        return ( <div>123</div> );

    }

}

export default TodoListUi;

TodoList.js

import TodoListUI from './TodoListUI'

render() {

    return (

        <TodoListUI />

    );

}

constructor 中对于对应方法要重新绑定 this
修改完 TodoList.js 文件，还要对UI组件进行对应的属性替换

无状态组件

无状态组件其实就是一个函数
不用继承任何的 class
不存在 state
因为无状态组件其实就是一个函数, 性能比普通的React组件好

TodoListUi 改写成无状态组件

import React from 'react';

const TodoListUi = (props)=>{

    return(

        <> some code </>

    )

}

export default TodoListUi;

Axios 异步获取数据和 Redux 结合

不过就是走一遍上面的流程

actionCreatores.js

export const getListAction  = (data)=>({

    type: xxx,

    data

})

组件

import axios from 'axios'

import {getListAction} from './store/actionCreatores'

componentDidMount(){

    axios.get('https:// xxx').then((res)=>{

        const data = res.data

        const action = getListAction(data)

        store.dispatch(action)

    })

}

reducer.js

import {GET_LIST} from './actionTypes'

const defaultState = {

    list:[]

}

export default (state = defaultState,action)=>{

    if(action.type === GET_LIST ){

        let newState = JSON.parse(JSON.stringify(state))

        newState.list = action.data.data.list

        return newState

    }

    return state

}

Redux 中间件

注意不是 react 中间件

Redux-thunk

Redux-thunk
Redux-thunk 是对 Redux 中 dispatch 的加强

npm install --save redux-thunk

import { createStore , applyMiddleware } from 'redux'

import thunk from 'redux-thunk'

const store = createStore(

    reducer,

    applyMiddleware(thunk)

)

使用中间件需要先引入 applyMiddleware
可以这样但是我们使用 Dev Tool 占用了第二个参数

所以我们这样写

import { createStore , applyMiddleware ,compose } from 'redux'

const composeEnhancers =   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?

    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}):compose

const enhancer = composeEnhancers(applyMiddleware(thunk))

const store = createStore( reducer, enhancer)

export default store

利用compose创造一个增强函数 composeEnhancers，就相当于建立了一个链式函数
把thunk加入 ( applyMiddleware(thunk) )
直接在createStore函数中的第二个参数，使用这个 enhancer 变量

在 actionCreators.js 中写业务

actionCreators.js 都是定义好的 action，根本没办法写业务逻辑，有了Redux-thunk之后，可以把TodoList.js中的 componentDidMount 业务逻辑放到这里来编写。

import axios from 'axios'

//...

export const getTodoList = () =>{

    return (dispatch)=>{

        axios.get('https:// xxx ').then((res)=>{

            const data = res.data

            const action = getListAction(data)

            dispatch(action)

        })

    }

}

以前的action是对象，现在的action可以是函数了，这就是redux-thunk带来的好处

组件中

import { getTodoList } from './store/actionCreatores'

// ...

componentDidMount(){

    const action = getTodoList()

    store.dispatch(action)

}

Redu-saga

安装

npm install --save redux-saga

store/index.js

import createSagaMiddleware from 'redux-saga'

const sagaMiddleware = createSagaMiddleware();

引入saga
创建saga中间件

Redux-thunk 替换成 saga

import { createStore , applyMiddleware ,compose } from 'redux'

import reducer from './reducer'

import createSagaMiddleware from 'redux-saga'

const sagaMiddleware = createSagaMiddleware();

const composeEnhancers =   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?

    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}):compose

const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware))

const store = createStore( reducer, enhancer)

export default store

创建 store/sagas.js

import {takeEvery, put} from 'redux-saga/effects'

import {GET_MY_LIST} from './actionTypes'

import {getListAction} from './actionCreatores'

import axios from 'axios'

//generator函数

function* mySaga() {

    //等待捕获action

    yield takeEvery(GET_MY_LIST, getList)

}

function* getList(){

    const res = yield axios.get('https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/xiaojiejie/getList')

    const action = getListAction(res.data)

    yield put(action)

}

export default mySaga;

store/index.js

import { createStore , applyMiddleware ,compose } from 'redux'  //  引入createStore方法

import reducer from './reducer'

import createSagaMiddleware from 'redux-saga'

import mySagas from './sagas'

const sagaMiddleware = createSagaMiddleware();

const composeEnhancers =   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?

    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}):compose

const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware))

const store = createStore( reducer, enhancer)

sagaMiddleware.run(mySagas)

export default store

react-redux

react-redux 不是 redux，

React-Redux 是 Redux 的官方 React 绑定库。它能够使你的 React 组件从 Redux store 中读取数据，并且向 store 分发 actions 以更新数据

npm install --save react-redux

是一个提供器，只要使用了这个组件，组件里边的其它所有组件都可以使用store了

import React from 'react';

import ReactDOM from 'react-dom';

import TodoList from './TodoList'

import { Provider } from 'react-redux'

import store from './store'

const App = (

    <Provider store={store}>

        <TodoList />

    </Provider>

)

ReactDOM.render(App, document.getElementById('root'));

connect 连接器

connect 可用来获取 store 中的数据
connect 的作用是把UI组件（无状态组件）和业务逻辑代码的分开，然后通过connect再链接到一起，让代码更加清晰和易于维护。

先制作映射关系，映射关系就是把原来的state映射成组件中的props属性

const stateToProps = (state)=>{

    return {

            inputValue: state.inputValue

    }

}

使用 connect 获取 store 中的数据

import {connect} from 'react-redux'

export default connect(inputValue, null)(TodoList); // 这里的 inputValue 代表一个映射关系

修改 store 中的数据

例子：当我们修改中的值时，去改变store数据，UI界面也随之进行改变。

import React, { Component } from 'react';

import store from './store'

import { connect } from 'react-redux'

class TodoList extends Component {

    constructor(props){

        super(props)

        this.state = store.getState()

    }

    render() {

        return (

            <div>

                <div>

                    <input value={this.props.inputValue} onChange={this.props.inputChange} />

                    <button>提交</button>

                </div>

                <ul>

                    <li></li>

                </ul>

            </div>

            );

    }

}

const stateToProps = (state)=>{

    return {

        inputValue : state.inputValue

    }

}

const dispatchToProps = (dispatch) =>{

    return {

        inputChange(e){

            console.log(e.target.value)

        }

    }

}

export default connect(stateToProps,dispatchToProps)(TodoList);

派发 action 到 store 中 (再走一遍流程)

const dispatchToProps = (dispatch) =>{

    return {

        inputChange(e){

            let action = {

                type:'change_input',

                value:e.target.value

            }

            dispatch(action)

        }

    }

}

reducer

const defalutState = {

    inputValue : 'jspang',

    list :[]

}

export default (state = defalutState,action) =>{

    if(action.type === 'change_input'){

        let newState = JSON.parse(JSON.stringify(state))

        newState.inputValue = action.value

        return newState

    }

    return state

}

参考资料

哔哩哔哩 jspang 的视频

相关官方文档