demo源码: https://github.com/recall-lidemin/todolist-demo.git
什么是Redux中间件?
- redux中间件的中间指的是action和store中间
- redux中间件实际是对dispatch方法的封装或升级,升级之后,dispatch就既能接收对象,也能接收函数
- 补充:中间件指的是redux的中间件,不是react的。
1.redux-thunk
- 安装redux-thunk
yarn add redux-thunk
- 注册中间件,使用
applyMiddleware
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'
// 为了thunk与devtools一起使用
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
- 在action中使用,使用了redux-thunk中间件之后,action返回就可以是一个函数,不再必须是对象,在这个函数中,我们可以发起异步请求来获取数据,而且返回的函数会被注入dispatch这个参数,我们不再需要引入store
store/actionCreators.js
export const getTodoList = () => {
return async (dispatch) => {
const res = await axios.get('http://localhost:3000/list')
const action = initListAction(res.data)
dispatch(action)
}
}
import {getTodoList} from './store/actionCreators'
const TodoList = () => {
// 发送请求获取数据
const getList = async () => {
const action = getTodoList()
store.dispatch(action) // 注入dispatch
}
}
2.redux-saga
- 安装redux-saga
yarn add redux-saga
- 注册redux-saga
import { createStore, applyMiddleware, compose } from 'redux'
import createSagaMiddleware from 'redux-saga'
import reducer from './reducer'
import mySaga from './sagas'
// 创建saga中间件
const sagaMiddleware = createSagaMiddleware()
// 开启devtools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
: compose
// 注册saga
const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware))
const store = createStore(reducer, enhancer)
// 运行saga文件
sagaMiddleware.run(mySaga)
export default store
import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import { GET_INIT_LIST } from './actionTypes'
import { initListAction } from './actionCreators'
import axios from 'axios'
// 处理函数,可以在此进行异步请求,这里使用的es6的Genegetor函数
function* fetchList() {
try {
const res = yield axios.get('http://localhost:3000/list')
const action = initListAction(res.data)
yield put(action)
} catch (error) {
// do null
}
}
// 监听页面action的派发,执行对应的函数
function* mySaga() {
yield takeEvery(GET_INIT_LIST, fetchList)
}
export default mySaga
// 使用redux-saga
const getList = async () => {
const action = getTodoList()
store.dispatch(action)
}
3.react-redux
- 安装react-redux
yarn add react-redux
- 创建store
import { createStore } from 'redux'
import reducer from './reducers'
const store = createStore(reducer)
export default store
- 连接react-redux,使用
Provider
,注册到上下文
import React from 'react'
import ReactDOM from 'react-dom'
import 'antd/dist/antd.css'
import TodoList from './todolist'
import { Provider } from 'react-redux'
import store from './react-redux'
// react-redux连接store
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<TodoList />
</Provider>
</React.StrictMode>,
document.getElementById('root')
import React from 'react'
import { Button, Input, List } from 'antd'
import { connect } from 'react-redux'
const TodoList = (props) => {
const { inputValue, list, handleChange, handleAdd, handleDel } = props
return (
<>
<div style={{ display: 'flex' }}>
<Input
style={{ width: 200 }}
value={inputValue}
onChange={handleChange}
/>
<Button type="primary" onClick={handleAdd}>
提交
</Button>
</div>
<List
size="large"
bordered
dataSource={list}
renderItem={(item, index) => (
<List.Item key={item} onClick={() => handleDel(index)}>
{item}
</List.Item>
)}
/>
</>
)
}
// 将state映射到props中
const mapStateToProps = (state) => {
return {
inputValue: state.inputValue,
list: state.list,
}
}
// 将dispatch映射到props中,可以在此处写处理函数,也可以将dispatch从组件props中解构出来,直接在组件中进行dispatch分发,此处就可以不必写,只传一个mapStateToProps参数即可
const mapDispatchToProps = (dispatch) => {
return {
handleChange(e) {
dispatch({
type: 'change_input_value',
value: e.target.value,
})
},
handleAdd() {
dispatch({
type: 'add_list',
})
},
handleDel(index) {
dispatch({
type: 'del_list',
value: index,
})
},
}
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoList)
发表评论
还没有评论,快来抢沙发吧!