在react-hooks中使用中间件

Question

因此，我在我的react原生应用程序中使用redux进行状态管理。我期待着在我的应用程序中使用钩子。我的存储有多个单个reducer的实例，因此将操作分派到单个reducer是一件很痛苦的事情。

在这种情况下，钩子似乎提供了一个非常好的解决方案。我们正在使用中间件来捕获特定的操作并执行副作用。我希望为钩子实现一个类似中间件的功能，其中分配给钩子的操作也可以在redux中间件中捕获。

任何关于如何实现这些功能的建议都将受到高度赞赏。

谢谢。

Answer 1

你是否听说过或尝试过redux-saga用于中间件异步的事情，如数据获取和访问浏览器缓存等不纯的事情更容易管理，更有效的执行，更容易测试，更好地处理故障。

有关更完整的文档，请参阅here

我给你举了一个简单的例子，说明如何使用redux saga作为副作用。

import api from '../api/apidetailproduct'; //if using api import it
import {
    takeLatest, //Spawns a saga on each action dispatched to the Store that matches pattern
    select, //instructs the middleware to invoke the provided selector on the current Store's state
    call, //for calling api
    put //instructs the middleware to dispatch an action to the Store. 
} from 'redux-saga/effects';
import {
    REQUEST_PRODUCT, 
} from '../actions/constants';
import {
    responseProduct,
} from '../actions/product';

export function* detailEffect(){
    const {loginreducer} = yield select() //first select your reducer where you store
    try {
        const {data} = yield call(api, loginreducer.token )//calling the api and then send the variable
        yield put(responseProduct(data))//put the data
    } catch (error) {
        console.log("error", error);
    }
}

export const productsagas = [takeLatest(REQUEST_PRODUCT, detailEffect)]