Last active
November 11, 2018 23:43
-
-
Save misraX/0fb6f32c87c638bc3bbd9b97d45be416 to your computer and use it in GitHub Desktop.
React New Context API, Passing redux store from Provider to children of Consumers.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* By: misrax | |
*/ | |
import React, { Component } from 'react' | |
import {createStore, combineReducers} from 'redux'; | |
import { Provider } from 'react-redux' | |
/* | |
* React new Context API, creating a new Context with default value. | |
*/ | |
const StoreContext = React.createContext({}); | |
/* | |
* Context consumer. | |
*/ | |
const List = (props) =>( | |
<StoreContext.Consumer> | |
{(soter) => ( | |
<h2 store={store}>Hello</h2> | |
)} | |
</StoreContext.Consumer> | |
); | |
const ListTwo = (props) =>( | |
<StoreContext.Consumer> | |
{(soter) => ( | |
<h2 store={store}>Hello</h2> | |
)} | |
</StoreContext.Consumer> | |
); | |
function counter(state = 0, action) { | |
switch (action.type) { | |
case 'INCREMENT': | |
return state + 1 | |
case 'DECREMENT': | |
return state - 1 | |
default: | |
return state | |
} | |
} | |
const store = createStore(combineReducers({ | |
counter | |
})) | |
class App extends Component { | |
render() { | |
return ( | |
<Provider store={store}> | |
<StoreContext.Provider value={store}> | |
<List/> | |
<ListTwo/> | |
</StoreContext.Provider> | |
</Provider> | |
) | |
} | |
} | |
export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment