使用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 {}
网友评论