同步异步
vuex是用来集中管理状态,你想修改vuex中的状态,需要通过mutaions。
如果有异步操作,典型的异步操作是发送ajax请求,需要把这个异步操作写在actions。
actions中还需要去commit一个mutaions。
在redux中,我们向reducer发送一个action,这个action可以是同步的,也可以是异步的。
action分两类:
- 同步action 本质是一个js对象,必定有一个属性叫type
- 异步action 本质是一个函数, redux默认的不是异步action
要管reducer中的代码,异步action,代码需要写在action creator中如下:
export function incrementAsync() {
return function (dispatch,getState)
{ // 使用actions creator创造中一个异步的action
// 在异步action中,尽情写异步代码
// ajax setTimout
setTimeout(()=>{
dispatch(increment()); // 在异步action中,需要dispath一个同步的action
},3000)
}
}
redux默认处理不了异步action,需要使用中间件。不使用,报错:
Error: Actions must be plain objects. Use custom middleware for async actions.
处理异步中间件
react-redux核心:
redux处理异步action的中间件:
- redux-thunk
- redux-saga 生成器 generator
使用redux-thunk,来处理异步action:
安装:npm i redux-thunk
import { createStore,applyMiddleware } from "redux"
import thunk from "redux-thunk"
// 返回一个增加版的createStore
let createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
let store = createStoreWithMiddleware(reduer)
export default store;
跨域
跨域问题:
1)代理
2)cors
3)jsonp
4)浏览器插件
5)nginx …
在开发时,使用代理解决跨域最常用。
使用方式非常简单,找到package.json,写一个proxy:
"proxy": "http://localhost:3000/"
在代码中发起ajax请求,如何写:
之前:ajax("http://localhost:3000/api/todos")
现在:ajax("/api/todos");
配完代理后,需要重启服务器 !!!!
redux核心
<Provider store={store}>
<App />
</Provider>
如果这样写,App组件以及App所有的子组件都可以使用store。
Provider组件
在顶层组件外面包一个Provider组件,这样,所有的组件都在react-redux的控制之下,如果把store作为参数放到Provider组件中,这样,所有组件都可以使用store。
目的:这样做,就可以让所有组件都可以访问到redux仓库中的数据了。
connect方法
connect本意连接
把一个展示型组件变成一个容器组件。把一个无状态的组件连接成一个有状态的组件。
组件:
状态
操作状态的方法(actions)
Counter
connect(mapStateToProps,mapDispathToProps)(Counter)
mapStateToProps
把仓库中的state映射成组件的props。
mapDispathToProps
让各种派发的action映射成组件的props。