11-07-redux异步

同步异步

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。