一篇文章介绍redux、react-redux、redux-saga总结

npm install redux -S // 安装

import { createStore } from 'redux' // 引入

const reducer = (state = {count: 0}, action) => {----------> ⑴
 switch (action.type){
 case 'INCREASE': return {count: state.count + 1};
 case 'DECREASE': return {count: state.count - 1};
 default: return state;
 }
}

const actions = {---------->⑵
 increase: () => ({type: 'INCREASE'}),
 decrease: () => ({type: 'DECREASE'})
}

const store = createStore(reducer);---------->⑶

store.subscribe(() =>
 console.log(store.getState())
);

store.dispatch(actions.increase()) // {count: 1}
store.dispatch(actions.increase()) // {count: 2}
store.dispatch(actions.increase()) // {count: 3}

<顶层组件 store={store}>
 <App />
</顶层组件>

<Provider store = {store}>
 <App />
<Provider>

connect(mapStateToProps, mapDispatchToProps)(MyComponent)

 const mapStateToProps = (state) => {
  return {
  // prop : state.xxx | 意思是将state中的某个数据映射到props中
  foo: state.bar
  }
 }

class Foo extends Component {
 constructor(props){
  super(props);
 }
 render(){
  return(
   // 这样子渲染的其实就是state.bar的数据了
   <div>this.props.foo</div>
  )
 }
}
Foo = connect()(Foo);
export default Foo;

const mapDispatchToProps = (dispatch) => { // 默认传递参数就是dispatch
 return {
 onClick: () => {
  dispatch({
  type: 'increatment'
  });
 }
 };
}

class Foo extends Component {
 constructor(props){
  super(props);
 }
 render(){
  return(
   
    <button onClick = {this.props.onClick}>点击increase</button>
  )
 }
}
Foo = connect()(Foo);
export default Foo;

window.addEventLister('xxx',fn)

// put：你就认为put就等于 dispatch就可以了；

// call：可以理解为实行一个异步函数,是阻塞型的，只有运行完后面的函数，才会继续往下；
// 在这里可以片面的理解为async中的await！但写法直观多了！
import { call, put } from 'redux-saga/effects'

export function* fetchData(action) {
 try {
  const apiAjax = (params) => fetch(url, params);
  const data = yield call(apiAjax);
  yield put({type: "FETCH_SUCCEEDED", data});
 } catch (error) {
  yield put({type: "FETCH_FAILED", error});
 }
}

import { takeEvery } from 'redux-saga'

function* watchFetchData() {

 yield* takeEvery("FETCH_REQUESTED", fetchData)
}

function* watchFetchData() {
 
 while(true){
  yield take('FETCH_REQUESTED');
  yield fork(fetchData);
 }
}

import { takeLatest } from 'redux-saga'

function* watchFetchData() {
 yield* takeLatest('FETCH_REQUESTED', fetchData)
}

function* watchFetchData() {
 while(true) {
 // 监听一个type为 'FETCH_REQUESTED' 的action的执行，直到等到这个Action被触发，才会接着执行下面的 yield fork(fetchData) 语句
  yield take('FETCH_REQUESTED');
  yield fork(fetchData);
 }
}

export function* toggleItemFlow() {
 let list = []
 // 发送一个type为 'UPDATE_DATA' 的Action，用来更新数据，参数为 `data：list`
 yield put({
  type: actionTypes.UPDATE_DATA,
  data: list
 })
}

export const delay = ms => new Promise(resolve => setTimeout(resolve, ms))

export function* removeItem() {
 try {
 // 这里call 函数就调用了 delay 函数，delay 函数为一个返回promise 的函数
 return yield call(delay, 500)
 } catch (err) {
 yield put({type: actionTypes.ERROR})
 }
}

import { fork } from 'redux-saga/effects'

export default function* rootSaga() {
 // 下面的四个 Generator 函数会一次执行，不会阻塞执行
 yield fork(addItemFlow)
 yield fork(removeItemFlow)
 yield fork(toggleItemFlow)
 yield fork(modifyItem)
}

export function* toggleItemFlow() {
  // 通过 select effect 来获取 全局 state上的 `getTodoList` 中的 list
  let tempList = yield select(state => state.getTodoList.list)
}

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from 'redux'
import createSagaMiddleware from 'redux-saga'

import rootSaga from './sagas'
import Counter from './Counter'
import rootReducer from './reducers'

const sagaMiddleware = createSagaMiddleware() // 创建了一个saga中间件实例

// 下边这句话和下边的两行代码创建store的方式是一样的
// const store = createStore(reducers,applyMiddlecare(middlewares))

const createStoreWithMiddleware = applyMiddleware(middlewares)(createStore)
const store = createStoreWithMiddleware(rootReducer)

sagaMiddleware.run(rootSaga)

const action = type => store.dispatch({ type })

function render() {
 ReactDOM.render(
 <Counter
  value={store.getState()}
  onIncrement={() => action('INCREMENT')}
  onDecrement={() => action('DECREMENT')}
  onIncrementAsync={() => action('INCREMENT_ASYNC')} />,
 document.getElementById('root')
 )
}

render()

store.subscribe(render)

import { put, call, take,fork } from 'redux-saga/effects';
import { takeEvery, takeLatest } from 'redux-saga'

export const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

function* incrementAsync() {
 // 延迟 1s 在执行 + 1操作
 yield call(delay, 1000);
 yield put({ type: 'INCREMENT' });
}

export default function* rootSaga() {
 // while(true){
 // yield take('INCREMENT_ASYNC');
 // yield fork(incrementAsync);
 // }

 // 下面的写法与上面的写法上等效
 yield* takeEvery("INCREMENT_ASYNC", incrementAsync)
}

export default function counter(state = 0, action) {
 switch (action.type) {
 case 'INCREMENT':
  return state + 1
 case 'DECREMENT':
  return state - 1
 case 'INCREMENT_ASYNC':
  return state
 default:
  return state
 }
}