Redux base (React, JSX)

Redux base (React, JSX)

by jonahe

HTML

<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<div id="root"></div>

Babel + JSX

const {connect, Provider} = ReactRedux;
const {createStore, combineReducers} = Redux;

/*  REDUCER  */
const r1_initialState = { message: 'Initial value'};
const reducer1 = (state = r1_initialState, action) => {
	switch(action.type) {
  	case CHANGE_MESSAGE: 
    	return {...state, message: action.newMessage};
    default: 
    	return state;
  }
};

/* ACTIONS */
const CHANGE_MESSAGE = 'CHANGE_MESSAGE';
const changeMessage = (newMessage) => ({type: CHANGE_MESSAGE, newMessage});

const store = createStore(
	combineReducers({reducer1})
);

class App extends React.Component {
  render() {
  	const {message, changeMessage} = this.props;
		return (
    	<div>
        <input 
          type="text" 
          value={message} 
          onChange={({target:{value}}) => changeMessage(value)}
        />
        <h1>{ message }</h1>
      </div>
    );
  }
}
const AppContainer = connect(
	(state, ownProps) => ({message: state.reducer1.message}),
  (dispatch) => ({
  		changeMessage: (newMessage) => dispatch(changeMessage(newMessage))
  	})
)(App)

ReactDOM.render(
	<Provider store={ store }>
	  <AppContainer />
	</Provider>
  , document.getElementById('root'));