Redux

Redux的使用

• 和Vuex作用相同，但比Vuex学习成本高
• 不可变值，纯函数
• 面试常考

基本概念

• store state
• action
• reducer

单向数据流

• dispatch(action)
• reducer => newState
• subscribe 触发通知

react-redux

import React from 'react'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp)

export default function () {
    return <Provider store={store}>
        <App />
    </Provider>
}

异步action

export const addTodoAsync = text => {
	return (dispatch) => {
		fetch(url).then(res => {
			dispatch(addTodo(res.text))
		})
	}
}

创建store时，作为中间件引入redux-thunk
const store = createStore(rootReducer, applyMiddleware(thunk))

中间件