Skip to content

Instantly share code, notes, and snippets.

@laere
Last active February 15, 2016 02:33
Show Gist options
  • Save laere/7177445c0162624dec93 to your computer and use it in GitHub Desktop.
Save laere/7177445c0162624dec93 to your computer and use it in GitHub Desktop.
import dotProp from 'dot-prop-immutable';
//save string values to vars
const ADD_TODO = 'ADD_TODO';
let nextId = 0;
//the action is whats performed to alter state
//addItem is an action creator and nees to return an action
export const AddTodo = (text) => {
return {
type: ADD_TODO,
id: nextId++,
text
};
}
//initial state of items and text
const initialState = {
items: [],
}
//A pure function that takes the current/prev state
//and an action, and returns the next state
//Reducer controls the state, and is where state lives.
export const ToDoState = (state = initialState, action) => {
switch(action.type) {
case ADD_TODO:
state = dotProp.set(state, 'items', items => [...items, {text: action.text, id: action.id }])
console.log(state, action);
return state;
default:
return state;
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
import dotProp from 'dot-prop-immutable';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { ToDoState } from '../src/reducers/reducer_todos';
let store = createStore(ToDoState);
console.log(store);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.querySelector('.container'));
import React, { Component } from 'react';
import { AddTodo } from '../reducers/reducer_todos';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import List from '../containers/List';
class App extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
this.props.AddTodo();
}
render() {
return (
<div>
<h1>To Do App</h1>
<List
items={this.props.items}
handleSubmit={this.handleSubmit}
/>
</div>
)
}
}
let mapDispatchToProps = (dispatch) => {
return bindActionCreators(
{
AddTodo: AddTodo
}, dispatch);
}
let mapStateToProps = (state) => {
return {
items: state.items,
text: state.text
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
import React, { Component } from 'react';
import ListItem from '../components/ListItem';
export default class List extends Component {
constructor(props) {
super(props);
this.handleOnClick = this.handleOnClick.bind(this);
}
handleOnClick(e) {
e.preventDefault();
let inputValue = this.refs.inputfield.value;
this.props.handleSubmit(inputValue);
console.log(inputValue);
}
renderTodos() {
return this.props.items.map((item) => {
return (
<ListItem key={item.id} text={item.text} />
);
});
}
render() {
return (
<div>
<form onSubmit={this.handleOnClick}>
<input type="text" ref="inputfield"/>
<input type="submit" value="Add" />
</form>
<ul>
{this.renderTodos()}
</ul>
</div>
);
}
}
import React, { Component } from 'react';
export default class ListItem extends Component {
render() {
return (
<li>
{this.props.text}
</li>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment