美文网首页程序员
如何快速理解使用redux

如何快速理解使用redux

作者: 眸晓 | 来源:发表于2020-07-03 14:42 被阅读0次

    使用redux的主要流程

    1. 首先 引入 redux
    2. 使用redux中的createStore去创建一个store
    3. 在创建使用createStore时,需要将reducer传入,
      这样才可以知道如何将state和传入的action联系起来,通过传入的action来return一个新的state
      reducer只可以查看store,不能修改store
    4. 同时,可以在createStore中加入redux dev tools方便调试
    5. 创建一个contants.js来统一管理actiontype名称,以便统一修改
    6. 创建一个actionCreator.js来统一管理去dispatchaction的操作

    总结:这其中包含了 创建store的 index.js、reducer.js、contants.js、actionCreator.js

    store.getState()  //可以获取store中的state
    store.subscribe()  //可以监听到所有store中的变化,并可以传入一个方法,对监听到的变化进行处理
    

    如何使用redux-dev-tools?(可以去github中搜,readme.md中有详细的使用方法)

    1. 在chrome中下载ReduxDevTools插件并使用
    2. 在代码中添加
      const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
      const store = createStore(reducer, composeEnhancers())
    

    如何使用中间件?

    1. 首先你需要从redux中引入applyMiddleWare
    2. 将你的中间件引入,比如 import thunk from 'redux-thunk
    3. 使用该中间件:applyMiddleWare(thunk)
    4. 在createStore时传入这个中间件:createStore(reducer,applyMiddleWare(thunk))

    如何使用redux-thunk?(可以去github中搜,readme.md中有详细的使用方法)

    1. 在使用redux-thunk之前,action只能是一个对象,使用之后,action除了是对象外,也可以是一个方法,且内部可以写异步函数了
    2. redux-thunk支持action是个函数,并且该函数中自动会有一个dispatch参数,可以直接使用dispatch方法(action内部的函数会获取一个dispatch参数,action的内部也可以调用其他的action,并执行dispatch去操作store的数据)
    3. 在页面中可以获取这个返回值为方法的action,并直接使用store.dispatch(action),它将会自动执行action内部的函数(这也是thunk的特性)

    如何使用react-redux?

    react-redux是干什么的?
    1. 它是一个方便在react中使用redux的工具
    如何使用?
    1. 在入口文件中使用
      import store from './store'
      import {Provider} from 'react-redux'
      <Provider store={store} > <xxx组件/> </Provider>
    

    将被包裹在其内部的组件都能直接拿到store(但需要使用connect)

    1. 在被包裹的组件内部使用connect可以将组件与store做连接
      // xxx组件内部
      import {connect} from 'react-redux'
    

    在导出组件时,使用connect

      export default connect(null,null)(xxx组件)
    
    那么怎么将store里的数据传给组件呢?有一个映射关系

    这是一个固定写法:

    mapStateToProps = (state)=>{
        // 这里的state就是store中的state数据
        // 将store里的数据映射到组件的props中
        return{
            xxx : state.yyy,    //这里的xxx 可以在组件中直接用this.props.xxx拿到
        }
    }
    

    已经知道了如何将store的数据传给组件,那么组件内部如果修改store内的数据呢?使用redux的时候是使用dispatch一个action来操作的
    使用react-redux时,也是使用dispatch,这里又有一个固定写法:

    mapDispatchToProps = (dispatch)=>{
        // 这里的dispatch就是redux中的store.dispatch
        // 这里的意思是将需要调用dispatch的,要去改变store数据的方法映射到props中去
        return{
            // 这个时候组件内部可以使用 this.props.changeInputValue去调用这个方法了
            changeInputValue(e){
                // 这里就可以直接使用dispatch方法了
                dispatch({
                    type:'CHANGE_INPUT_VALUE',
                    value:e.target.value
                })
                // 这个时候reducer内部就可以接收到这个action,并做出对应的操作改变store的数据了
            }
        }
    }
    

    现在再将 mapStateToPropsmapDispatchToProps 传给connect就大功告成了!

      export default connect(mapStateToProps ,mapDispatchToProps )(xxx组件)
    

    (这里可以使用装饰器简化写法:)

    @connect(mapStateToProps, mapDispatchToProps)
    export default class xxx extends React.Component {}
    

    相关文章

      网友评论

        本文标题:如何快速理解使用redux

        本文链接:https://www.haomeiwen.com/subject/imesqktx.html