react_redux_saga使用

创建项目

npx create-react-app my-app

创建 redux目录

目录下分别创建目录reducers、actions、saga

安装

yarn add redux --save
yarn add react-redux
yarn add redux-thunk
yarn add redux-saga

actions

src\redux\actions

import { USER } from "./index";

// export const FETCH_USER_LIST = USER + "FETCH_USER_LIST";

export const FETCH_USER_LIST = () => {
    return {
        type: USER + "FETCH_USER_LIST",
    };
};

reducers

src\redux\reducers\index.js

import { combineReducers } from "redux";
import userReducers from "./userReducers";
const rootReducer = combineReducers({ userReducers });
export default rootReducer;

src\redux\reducers\userReducers.js

import { USER } from "./index";

export const USER_overrideStateProps = USER + "overrideStateProps";
export const USER_updateStateProps = USER + "updateStateProps";

export const FETCH_USER_LIST = () => {
    return {
        type: USER + "FETCH_USER_LIST",
    };
};

saga

src\redux\saga\index.js

import { call, put, take, all, fork } from "redux-saga/effects";

import userSaga from "./userSaga";

export default function* rootSaga() {
    yield all([fork(userSaga)]);
}

``
src\redux\saga\userSaga.js

```javascript
import { call, put, take, all, fork } from "redux-saga/effects";
import * as actions from "../actions/userActions";
import { delay } from "redux-saga";

function* fetchUserList() {
    console.log("请求用户");
    yield call(delay, 1000); // 需要执行异步的时候，直接调用 call
    yield put({
        type: "ADD",
    });
}

function* fetchUserListAsync() {
   console.log("监听请求用户action");
    // while (true) {
    //     const { payload } = yield take(actions.USER_LIST_ASYNC);
    //     yield fork(getUserList, payload);
    //     console.log("payload", payload);
    // }
    yield takeEvery("USER/USER_LIST_ASYNC", function* ({ payload }) {
        console.log("payload", payload);
        yield fork(getUserList, payload);
    });
}

export default function* () {
    yield all([fork(fetchUserListAsync)]);
}

store

import { createStore, applyMiddleware } from "redux";
import reducer from "./reducers";
import rootSaga from "./saga";

import createSagaMiddleware from "redux-saga";
const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, applyMiddleware(sagaMiddleware)); //创建仓库
sagaMiddleware.run(rootSaga);

export default store; //暴露store

入口文件

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./redux/store";
ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

使用方式connect

import { connect, useDispatch } from "react-redux";
import "./App.css";

function App(props) {
    console.log(11, props);
    return (
        <div className="App">
            <div>Learn React</div>
        </div>
    );
}
const mapStateToProps = (state) => {
    return {
        userReducers: state.userReducers,
    };
};
const mapDispatchToProps = (dispatch) => {
    return {};
};
export default connect(mapStateToProps, mapDispatchToProps)(App);

使用方式hooks

import { useDispatch, useSelector } from "react-redux";
import "./App.css";
import store from "./redux/store";

function App(props) {
    const dispatch = useDispatch();
    const user = useSelector((store) => store.userReducers);
    console.log(11, props);
    console.log("user", user);
    const handleMin = () => {
        console.log(99);
        dispatch({
            type: "USER/overrideStateProps",
            payload: {
                number: 3,
            },
        });
    };
    const handleChangeUser = () => {
        dispatch({
            type: "USER/updateStateProps",
            payload: {
                name: "userInfo",
                value: {
                    name: "修改对象",
                    name2: "修改对象33",
                },
            },
        });
    };
    const handleChangeUserAsync = () => {
        dispatch({
            type: "USER/FETCH_USER_LIST",
        });
    };

    return (
        <div className="App">
            <div>Learn React</div>
            <button onClick={handleMin}>-</button>
            <button onClick={handleChangeUser}>同步修改用户</button>
            <button onClick={handleChangeUserAsync}>异步修改用户</button>
        </div>
    );
}

export default App;

saga理解

saga文档
简单理解 ‘redux-saga/effects’ 中的几个关键字：fork，call， put，takeEvery，takeLatest，all

fork ：创建一个新的进程或者线程，并发发送请求。
call：发送 api 请求

put：发送对应的 dispatch，触发对应的 action

takeEvery：监听对应的 action；
每一次 dispatch 都会触发；例如：点击一个新增的按钮，2s 后触发新增动作，在2s内不断点击按钮，这时候，每一次点击，都是有效的。
yield takeEvery(‘FETCH_USER’, fetch_user);

takeLatest：监听对应的 action；
只会触发最后一次 dispatch；例如：点击一个新增的按钮，2s 后触发新增动作，在2s内不断点击按钮，这时候，只有最后一次点击是有效的。
yield takeLatest(‘FETCH_USER’, fetch_user);

all：跟 fork 一样，同时并发多个 action，没有顺序。