redux学习

• 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用于接收中间件