在react中使用redux

Posted maopixin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在react中使用redux相关的知识,希望对你有一定的参考价值。

写在前面

  在react中使用redux一直是一大痛点,redux 过于复杂 所以后来出现了mobx,当然今天不说mobx,今天说下redux(自以为很复杂的redux)。

         redux的基本用法就是:用户发出 Action,Reducer 函数算出新的 State,View 重新渲染。但是现在有一个问题就是,异步操作怎么办?Action 发出以后,Reducer 立即算出 State,这叫做同步;Action 发出以后,过一段时间再执行 Reducer,这就是异步。

         怎么才能 Reducer 在异步操作结束后自动执行呢?这就要用到新的工具:中间件(middleware)。本次用到的中间件有redux-thunk,redux-logger

         

  1. 安装四个npm包

    npm install --save redux react-redux redux-thunk
    npm install --save-dev redux-logger

    redux 和 react-redux 是必须的 redux-thunk可以帮你实现异步action。redux-logger可以实现监测redux的变化

  2. 文件结构

    技术分享图片

    然后我们在详细介绍一下每个文件所做的事情

  3. actions.js

    export const SET_PAGE_TITLE = "SET_PAGE_TITLE";
    export const SET_INFO_LIST = "SET_INFO_LIST";
    
    
    export function setPageTitle(data){
        return {type: SET_PAGE_TITLE, data: data}
    }
    
    export function setInfoList (data) {
      return (dispatch, getState) => {
        // 使用fetch实现异步请求
        // 请求发起前可以先dispatch一个加载开始状态
        // 例如 dispatch({ type: SET_LOADING_TYPE, data: "loading" })
        window.fetch(‘/api/getInfoList‘, {
            method: ‘GET‘,
            headers: {
                ‘Content-Type‘: ‘application/json‘
            }
        }).then(res => {
            return res.json()
        }).then(data => {
            let { code, data } = data
            if (code === 0) {
                dispatch({ type: SET_INFO_LIST, data: data })
            }
            // 请求结束可以dispatch一个加载结束状态
            // 例如 dispatch({ type: SET_LOADING_TYPE, data: "loaded" })
            // 还可以区分一下成功或者失败
        })
      }
    }
    

      可以看出第一个action 是直接返回了一个action:{type: SET_PAGE_TITLE, data: data} ,而第二个则返回了一个函数,这个函数接受两个参数 dispatch 与 getState  , dispatch可以在异步加载完成以后发出一个action。在不使用redux-thunk这个中间件的时候dispatch接受的只能是一个action , 使用这个中间件就可以接受上文所说的参数,也就实现了Reducer 在异步操作结束后自动执行。

  4. reducers.js

    // reducers.js
    
    // combineReducers 工具函数,用于组织多个reducer,并返回reducer集合
    import {combineReducers} from ‘redux‘
    import defaultState from ‘./state‘
    import {SET_PAGE_TITLE,SET_INFO_LIST} from ‘./actions‘
    
    
    //一个reducer 就是一个函数
    function pageTitle ( state = defaultState.pageTitle, action){
        // 不同的action 有不同的处理逻辑
        switch (action.type) {
            case SET_PAGE_TITLE:
                return action.data
            default:
                return state
        }
    }
    
    function infoList (state = defaultState.infoList, action){
        switch (action.type) {
            case SET_INFO_LIST:
                return action.data
            default:
                return state
        }
    }
    
    export default combineReducers({
        pageTitle,
        infoList
    })
  5. state.js

    /**
        此文件存放state默认值
        同步数据:pageTitle
        异步数据:infoList(将来用异步接口获取)
     */
    
    export default {
        pageTitle:"首页",
        infoList:[]
    }
    

      

  6. index.js

    // index.js
    
    // applyMiddleware: redux通过该函数来使用中间件
    // createStore: 用于创建store实例
    import { applyMiddleware, createStore } from ‘redux‘
    
    // 中间件,作用:如果不使用该中间件,当我们dispatch一个action时,需要给dispatch函数传入action对象;但如果我们使用了这个中间件,那么就可以传入一个函数,这个函数接收两个参数:dispatch和getState。这个dispatch可以在将来的异步请求完成后使用,对于异步action很有用
    import thunk from ‘redux-thunk‘
    import logger from ‘redux-logger‘
    
    // 引入reducer
    import reducers from ‘./reducers.js‘
    
    // 创建store实例 第一个参数是reducer集合(reducers),第二个参数初始化的store(initialState),第三个参数是applyMiddleware函数,来使用中间件 ,因为只在reducer里面初始化了值,所以这里并没有传入初始化store的值
    let store = createStore(
      reducers,
      applyMiddleware(thunk,logger)
    )
    
    export default store
    

      

  7. 入口文件

    import React from ‘react‘;
    import ReactDOM from ‘react-dom‘;
    import {BrowserRouter as Router,Route} from "react-router-dom";
    import {Provider} from "react-redux";
    import store from ‘./store‘
    import App from ‘./App‘
    import * as serviceWorker from ‘./serviceWorker‘;
    
    
    ReactDOM.render(
        <Provider store={store}>
            <Router >
                <Route component={App} />
            </Router>
        </Provider>
    , document.getElementById(‘root‘));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: http://bit.ly/CRA-PWA
    serviceWorker.unregister();
    

      

  8. test.js

    // Test.jsx
    
    import React, { Component } from ‘react‘
    import {Route,Link} from ‘react-router-dom‘
    // connect方法的作用:将额外的props传递给组件,并返回新的组件,组件在该过程中不会受到影响
    import { connect } from ‘react-redux‘
    
    // 引入action
    import { setPageTitle, setInfoList } from ‘../store/actions.js‘
    
    class Test extends Component {
      constructor(props) {
        super(props)
        this.state = {}
      }
    
      componentDidMount () {
        let { setPageTitle, setInfoList } = this.props
        
        // 触发setPageTitle action
        setPageTitle(‘新的标题‘)
        
        // 触发setInfoList action
        setInfoList([{data:1}])
      }
    
      render () {
        // 从props中解构store
        let { pageTitle, infoList } = this.props
        
        // 使用store
        return (
          <div>
            <div>
              <Link to="/courses/ii">Courses</Link>
            </div>
            <h1>{pageTitle}</h1>
            {
                infoList.length > 0 ? (
                    <ul>
                        {
                            infoList.map((item, index) => {
                                return <li key={index}>{item.data}</li>
                            })
                        }
                    </ul>
                ):null
            }
          </div>
        )
      }
    }
    
    // mapStateToProps:将state映射到组件的props中
    const mapStateToProps = (state) => {
      return {
        pageTitle: state.pageTitle,
        infoList: state.infoList
      }
    }
    
    // mapDispatchToProps:将dispatch映射到组件的props中
    const mapDispatchToProps = (dispatch, ownProps) => {
      return {
        setPageTitle (data) {
            // 如果不懂这里的逻辑可查看前面对redux-thunk的介绍
            dispatch(setPageTitle(data))
            // 执行setPageTitle会返回一个函数
            // 这正是redux-thunk的所用之处:异步action
            // 上行代码相当于
            /*dispatch((dispatch, getState) => {
                dispatch({ type: ‘SET_PAGE_TITLE‘, data: data })
            )*/
        },
        setInfoList (data) {
            dispatch(setInfoList(data))
        }
      }
    }
    
    export default connect(mapStateToProps, mapDispatchToProps)(Test)
    

      

    代码的重点在connect函数。这个函数也是由react-redux提供的。使用它可以包装普通的展示组件(这里的Test——只负责展示数据),然后返回一个容器组件。connect函数通过第一个参数让展示组件订阅了来自store的数据;通过第二个参数让展示组件默认可以dispatch各种action。

 applyMiddlewares()

  applyMiddlewares是redux的原生方法,作用是将所有中间件组成一个数组,依次执行。

  要注意的是中间件为顺序有要求,具体可以查看你下载的npm包介绍。

  本次使用的redux-logger 必须放最后,不然可能监测不到正确的store

  

以上是关于在react中使用redux的主要内容,如果未能解决你的问题,请参考以下文章

无法解析容器中的存储(React,Redux)

React-Redux的使用

将状态传递给 React/Redux 中的递归嵌套组件

Redux&React路由器:梳理调度和导航(history.push)

使用通过 react、redux 和 react-redux 完成的组件以及在 react 应用程序中使用 webpack 构建时出错

redux超易学三篇之二(开始使用react-redux)