redux使用简单优化

一 目前项目使用方式：connect注入

在对函数式组件可使用connect，也可使用hook是引入import { useSelector, useDispatch } from “react-redux”;

dispatch({
        type: `${currentModel}/overrideStateProps`,
        payload: {
            number: 3,
        },
    });
    类似写法也可以在actives进行配置，基于umi写法习惯，一般直接声明active调用即可，但要确保命名空间唯一

import logo from "./logo.svg";
import "./App.css";
// import { connect } from "react-redux";
import { useSelector, useDispatch } from "react-redux";
import * as userActions from "./redux/actions/userActions";
import * as namespaces from "./redux/actions/namespaces";
const currentModel = namespaces.USER;
function App(props) {
    console.log(props);
    const dispatch = useDispatch();
    const { number, userInfo } = useSelector((state) => state.userReducers);
    console.log("number:", number, userInfo);
    const add = () => {
        console.log(99);
        dispatch({
            type: `${currentModel}/overrideStateProps`,
            payload: {
                number: 3,
            },
        });
    };
    const updatTeState = () => {
        dispatch({
            type: `${currentModel}/updateStateProps`,
            payload: {
                name: "userInfo",
                value: {
                    name: "修改对象",
                    name2: "修改对象33",
                },
            },
        });
    };
    const sagaTest = () => {
        console.log(44);
        dispatch({
            type: "USER/USER_LIST_ASYNC",
            // type:'getUserListAsync',
            payload: {
                uu: 0,
            },
        });
    };
    return (
        <div className="App">
            <p>number:{number}</p>
            <p>name:{userInfo.name}</p>
            <button onClick={add}>+</button>
            <button onClick={updatTeState}>updateStateProps</button>
            <button onClick={sagaTest}>saga</button>
        </div>
    );
}

export default App;

更多使用请看 react-redux使用hooks替代connect 地址：https://blog.youkuaiyun.com/waillyer/article/details/116479890

二、调整reducer文件

只是简化写法,对之前的写法不构成影响

import {
    handleOverrideStateProps,
    handleUpdateStateProps,
    getReducersType,
} from "./overrideAndUpdateStateProps";
import * as namespaces from "../namespaces";
//reducer.js
const namespace = namespaces.USER;
const defaultState = {
    number: 0,
    userInfo: {
        name: "wxq",
    },
};
//获取默认type
const defaultReducersType = getReducersType(namespace);

const Index = (state = defaultState, action) => {
    switch (action.type) {
        case defaultReducersType.overrideStateProps: //同步刷新
            return handleOverrideStateProps(state, action);
        case defaultReducersType.updateStateProps:
            return handleUpdateStateProps(state, action);
        default:
            return state;
    }
};
export default Index;

export const handleOverrideStateProps = (state, { payload }) => {
    return {
        ...state,
        ...payload,
    };
};

export const handleUpdateStateProps = (state, { payload }) => {
    const { name, value } = payload;
    return {
        ...state,
        ...{ [name]: { ...state[name], ...value } },
    };
};
export const getReducersType = (namespace) => {
    return {
        overrideStateProps: `${namespace}/overrideStateProps`,
        updateStateProps: `${namespace}/updateStateProps`,
    };
};

三、saga使用

异步启用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

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

function* getUserList(payload) {
  console.log("触发异步");

    try {
      const response = yield call(apis.getMerchantModule().list, payload);
      yield put({ tgetUserListype: actions.USER_LIST, payload: response });
    } catch (e) {
      yield put({ type: actions.USER_LIST, payload: e });
    }
  }
  
  function* getUserListAsync() {
   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(getUserListAsync)]);
  }

详细使用请看上一篇 react_redux_saga使用
https://blog.youkuaiyun.com/waillyer/article/details/123516178

备注、新项目推荐使用umi或者dva

如果条件允许可以直接使用umi构建
也可以在项目基础上结合dva简化redux（但这只能在项目初期或者刚开始阶段，dva是对redux，react-redux,redux-saga 封装，想要同时使用dva和传统redux写法是行不通的）
umi和dva实战：
地址
https://blog.youkuaiyun.com/waillyer/article/details/116454155

react-redux-dva对普通项目实践
地址
https://blog.youkuaiyun.com/waillyer/article/details/117395599