Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A short and condensed example using ReactJS and Redux
import React, { Component } from 'react';
import { render } from 'react-dom';
import { createStore, combineReducers } from 'redux'
import { Provider, connect } from 'react-redux'
import Hello from './Hello';
import './style.css';
const CHANGENAME = 'CHANGENAME'
const action = (name) => ({
type: CHANGENAME,
payload: name
})
const name = (state={}, action) => {
switch(action.type){
case CHANGENAME:
return {...state, value: action.payload}
default:
return state
}
}
const reducers = combineReducers(
{name}
)
class App extends Component {
render() {
console.log(this.props)
return (
<div>
<Hello name={this.props.name} />
<p>
Start editing to see some magic happen :)
</p>
<button onClick={() => this.props.action('name')}>Click me</button>
</div>
);
}
}
const mapStateToProps = (state) => ({
name: state.name.value
})
const Apps = connect(
mapStateToProps,
{action}
)(App)
const store = createStore(reducers)
render(
<Provider store={store}>
<Apps />
</Provider>,
document.getElementById('root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.