@xcritical/saga-injector
v1.1.0-beta.0
Published
Inject reducer and saga anywhere in the application.
Downloads
8
Readme
#How use inject to redux
- Create your store with
createSlice
for your page
//store.js
const INIT_STATE = {
info: {}
}
const infoStore = createSlice({
name: "INFO",
initialState: INIT_STATE,
reducers: {
setInfo: (state, {payload}) => {
state.info = payload;
}
},
});
export const actions = {
setInfo: infoStore.action.setInfo
}
export const infoReducer = infoStore.reducer;
- Create your saga and watchers for this saga
//saga.js
import {takeEvery, call, put} from "@redux-saga/core/effects";
import {actions} from "store.js";
function* handlerLoadInfo() {
const info = yield call(loadInfo);
yield put(actions.setInfo(info));
}
export function* wathcers() {
yield takeEvery(actions.setInfo.type, handlerLoadInfo)
}
- Create your component with injecting HOC
import React from 'react';
import {ReduxInject} from "./ReduxInject";
import {infoReducer} from 'store.js'
import {wathcers} from 'saga.js'
const YourComponent = () => (
<div>your component </div>
)
export const YourComponentWithInject = () => (
<ReduxInject
keyName='info'
reducer={infoReducer}
saga={wathcers}
>
<YourComponent />
</ReduxInject>
)
After the render your YourComponentWithInject
saga and reducer injected to the current store.
Inject is successful after
Saga with key "keyName" injected
Reducer with key "keyName" injected
in a browser's console