- store:数据仓库;
- state:一个对象,所有对象都放在一个state;
- Action:一个动作,触发数据的改变方法
- Dispatch:将动作触发成方法;
- Reducer:一个函数,通过动作改变数据,生成一个新的state
流程:
import Redux, {createStore} from 'redux'
- createStore表示创建一个库,初始化数据
创建了一个store的库
const store = createStore(reducer);
- reducer用于通过动作去修改数据(或者创建初始数据),其state属性就是添加数据
const reducer=(state={num:0},action)=>{
if(action.type=="add"){
state.num++
}else if(action.type=="delete"){
state.num--
}
return {...state}
}
- 获取数据 返回值reducer中的state,这里的state是个对象=>{num:0}
store.getState().num
- 修改数据
store.dispatch({type:"add",content:"id:0"})
- 监听数据变化=>重新渲染数据
store.subscribe(()=>{})
provider :自动将store的state和组件进行关联
这篇文章写的非常好,对刚学的很友好react-redux新手
npm install redux /react-redux
npm install --save react-thunk (处理异步的中间件)
import {createStore,applyMiddleware} from 'redux //applyMiddleware用于接收中间件的'
npm install redux-devtools-extension (redux状态查看工具)
import { composeWithDevTools } from "redux-devtools-extension"
引用中间件方式
const store = createStore(rootReducer,composeWithDevTools(applyMiddleware(thunk,looger)));
React-redux
import { Provider } from 'react-redux'
<Provider store={store}>
<App />
</Provider>
作为项目的根组件,传入全局的store
import { connect } from 'react-redux'
const mapStateToProps = state => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
const mapDispatchToProps = dispatch => {
return {
onTodoClick: id => {
dispatch(toggleTodo(id))
}
}
}
export default VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(MyComponent)
需要操作或接收store的组件使用connect函数包装connect(mapStateToProps, mapDispatchToProps)(MyComponent) mapStateToProps用于获取状态,将指定的state映射到组件的props mapDispatchToProps返回一个函数对象,其中的函数dispatch一个action用于操作state,将这个函数对象映射到props
redux-thunk
redux-thunk重写了store提供的dispatch方法 使dispatch可以接收一个function
Thunk middleware 并不是 Redux 处理异步 action 的唯一方式:
你可以使用 redux-promise 或者 redux-promise-middleware 来 dispatch Promise 来替代函数。
你可以使用 redux-observable 来 dispatch Observable。
你可以使用 redux-saga 中间件来创建更加复杂的异步 action。
你可以使用 redux-pack 中间件 dispatch 基于 Promise 的异步 Action。
你甚至可以写一个自定义的 middleware 来描述 API 请求,就像这个 真实场景的案例 中的做法一样。
你甚至可以写一个自定义的 middleware 来描述 API 请求,就像这个 真实场景的案例 中的做法一样。
redux中间件
到现在其实已经接触了redux的中间件了,遵从redux的设计风格,reducer为纯函数,不参与异步操作等,通过dispatch(action)来调用reducer 通过重写store等dispatch实现扩展
最简单的中间件
// 保存原来的dispatch
let next = store.dispatch
// 重写
store.dispatch = function dispatchAndLog(action) {
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}
这种通过重写一个钩子函数的做法叫做Monkeypatching
实际上redux提供了applyMiddleware用于接收中间件