Skip to content

Instantly share code, notes, and snippets.

import * as React from "react";
import { setFirstName } from "./actions";
import InputField from "../../components/InputField";
import connect from "../../path to our connect function";
const Container1 = ({ getFirstName, getLastName, dispatchFistName }) => {
return (
<article>
<p>
<strong>
import React from "react";
import { ContextProvider } from "./path to provider";
export default function App() {
return (
<ContextProvider>
{
// ... the rest of your app
}
</ContextProvider>
import React from "react";
import { ContextProvider } from "./path to provider";
export default function App() {
return (
<ContextProvider>
{
// ... the rest of your app
}
</ContextProvider>
import * as React from "react";
import { ContextConsumer } from "./path to provider";
/**
* function in charge of combining the factories, props and context to a React.Component
*
* @param {factory} mapStateToProps
* @param {factory} mapDispatchToProps
* @return {function(React.Component): function(object): *}
*/
import * as React from "react";
import { ContextConsumer } from "./path to provider";
/**
* function in charge of combining the factories, props and context to a React.Component
*
* @param {factory} mapStateToProps
* @param {factory} mapDispatchToProps
* @return {function(React.Component): function(object): *}
*/
import * as React from 'react';
import reducer from './path to the object containing the reducers/';
import { combineReducer } from './path to combineReducer function';
const AppStateProvider = React.createContext({});
const ContextProvider = ({ children }) => {
const reducers = React.useCallback(() => {
return combineReducer(reducer);
import * as Immutable from "immutable";
import * as React from "react";
export const combineReducer = reducers => {
const globalState = {};
// set default state returned by reducer and its reducer
for (const [key, value] of Object.entries(reducers)) {
if (typeof value === "function") {
globalState[key] = value(undefined, { type: "__@@PLACEHOLDER_ACTION__" });
import homeReducer from '../path'
import anotherReducer from '../path'
export const reducerExample = {
home: homeReducer,
example: anotherReducer
}
@csantiago132
csantiago132 / combineReducer.js
Last active February 24, 2020 05:24
A guide on how to easily migrate from Redux to React Context API
import * as React from 'react'
import { reducers } from '../path/to/reducers.js'
/**
* Combines all reducers into one to create the root reducer of the
* application
*
* @param {object} reducers
*/
export const combineReducer = (reducers) => {

1. Clone your fork:

git clone [email protected]:YOUR-USERNAME/YOUR-FORKED-REPO.git

2. Add remote from original repository in your forked repository:

cd into/cloned/fork-repo
git remote add upstream git://github.com/ORIGINAL-DEV-USERNAME/REPO-YOU-FORKED-FROM.git
git fetch upstream