https://github.com/dkbyo/react-context-saga
A lightweight library to call async functions in React Context API
https://github.com/dkbyo/react-context-saga
async react react-context-api react-hooks sagas
Last synced: about 1 month ago
JSON representation
A lightweight library to call async functions in React Context API
- Host: GitHub
- URL: https://github.com/dkbyo/react-context-saga
- Owner: DKbyo
- Created: 2019-06-24T23:16:30.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T01:01:01.000Z (over 3 years ago)
- Last Synced: 2025-10-10T20:17:57.892Z (8 months ago)
- Topics: async, react, react-context-api, react-hooks, sagas
- Language: JavaScript
- Size: 188 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-context-saga
Is a lightweight API to use easily async functions that modify the React Context State. Based in redux-saga.
# Motivation
There is a new React Context API that seems to be the evolution of redux. As a redux developer I want to try it but using my old way redux-saga functions, since I never use all the power of the generator functions, I change it to use async functions.
# Usage
1. Install using `yarn add react-context-saga`
2. Create reducer using the saga async functions
3. Create the provider using sagaName, the recently created reducer, and the initial values
The state of this provider could be changed using dispatch method `{type: "saga_async_function", payload: {color: "blue"}}`
4. There are 2 reserved saga async functions, set and merge
**set**: Change certain value i.e. {type: "set", key:"color", payload: "red"}
**merge**: Merge Immutable map i.e. {type: "merge", payload: { color: "red"}}
# Example
As you can see in [React Context Saga + Websockets](https://github.com/DKbyo/websocket-react-context), the structure is very simple, instead of create a context folder you can declare your contexts in the App.js directly and import the saga functions and the initial values from somewhere else.
````jsx
import React from 'react';
import {createSagaProvider, createSagaReducer} from 'react-context-saga'
import {getConsumer} from 'react-context-saga'
import {useSagaState} from 'react-context-saga'
import Immutable from 'immutable';
import request from 'superagent';
const EXAMPLE_SAGA = {
// In the saga functions you can do a lot of fun stuff
// Call an API and save the response in the state
getReactProyects: async (state, payload, dispatch)=>{
return request.get("https://api.github.com/search/repositories?q=react&sort=stars&order=desc")
.then((response)=>{
return {
"reactProyects": response.body.total_count
}
})
}
}
const exampleInitialValues =Immutable.fromJS({
"reactProyects": 'n/a'
})
const exampleReducer = createSagaReducer(EXAMPLE_SAGA);
const ExampleProvider = createSagaProvider({sagaName:'example', reducer:exampleReducer, initialValues:exampleInitialValues })
function ExampleComponent() {
// Get state and dispatch method, altought we will use only dispatch here
const [state, dispatch] = useSagaState('example');
return (
dispatch({type: 'getReactProyects'})}>Get React Proyects
React Proyects {state.get("reactProyects")}
)
}
// For non functional components
/*
const ExampleConsumer = getConsumer('example')
class ExampleComponent extends React.Component{
render(){
return (
{([state, dispatch]) =>
dispatch({type: 'getReactProyects'})}>Get React Proyects
React Proyects {state.get("reactProyects")}
}
)
}
}
*/
function App(){
return (
);
}
export default App;
/*
````