如何快速理解使用redux

2020-07-03 本文已影响0人眸晓

使用redux的主要流程

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

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

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

如何使用redux-dev-tools？（可以去github中搜，readme.md中有详细的使用方法）

在chrome中下载ReduxDevTools插件并使用
在代码中添加

  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const store = createStore(reducer, composeEnhancers())

如何使用中间件？

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

如何使用redux-thunk?（可以去github中搜，readme.md中有详细的使用方法）

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

如何使用react-redux？

react-redux是干什么的？

它是一个方便在react中使用redux的工具

如何使用？

在入口文件中使用

  import store from './store'
  import {Provider} from 'react-redux'
  <Provider store={store} > <xxx组件/> </Provider>

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

在被包裹的组件内部使用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的数据了
        }
    }
}

现在再将 mapStateToProps 和 mapDispatchToProps 传给connect就大功告成了！

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

（这里可以使用装饰器简化写法：）

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