Skip to content

Instantly share code, notes, and snippets.

@laere
Created February 14, 2016 18:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save laere/08b58072e87bca49a04e to your computer and use it in GitHub Desktop.
Save laere/08b58072e87bca49a04e to your computer and use it in GitHub Desktop.
import React, { Component } from 'react';
import ListItem from '../components/ListItem';
export default class List extends Component {
// renderTodos() {
// return this.props.items.map((item) => {
// return (
// <Listitem key={item.id}>
// {item.text}
// </Listitem>
// );
// });
// }
render() {
return (
<div>
<ul>
<form>
<input onChange={this.props.handleOnChange} ref="inputfield"/>
<button onClick={this.props.handleOnClick} >Add</button>
</form>
{/*{this.renderTodos()};*/}
</ul>
</div>
);
}
}
import React, { Component } from 'react';
export default class ListItem extends Component {
render() {
return (
<li>
<h4>{this.props.text}</h4>
</li>
);
}
}
import React, { Component } from 'react';
//import actions
import { UpdateText } from '../reducers/reducer_todos';
import { AddToDo } from '../reducers/reducer_todos';
console.log(AddToDo);
console.log(UpdateText);
// import { RemoveToDo } from '../reducers/reducer_todos';
//connect to store
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
//import List component
import List from '../containers/List';
class App extends Component {
constructor(props) {
super(props);
}
handleOnChange(e) {
this.props.UpdateText(e.target.value);
console.log(e.target.value);
}
handleOnClick(e) {
e.preventDefault();
this.props.AddTodo(this.getInputText());
console.log('test click');
}
getInputText() {
return this.refs.inputfield.value;
console.log(this.refs.inputfield.value);
}
render() {
return (
<div>
<h1>To Do App</h1>
<List />
</div>
)
}
}
let mapDispatchToProps = (dispatch) => {
//takes single action or object as first arg
//takes dispatch as second arg
return bindActionCreators(
{
AddToDo: AddToDo,
UpdateText: UpdateText
}, dispatch);
}
let mapStateToProps = (state) => {
return {
items: state.items,
text: state.text
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
//create store
// import { createStore } from 'redux';
//save string values to vars
const ADD_TODO = 'ADD_TODO';
const UPDATE_TEXT = 'UPDATE_TEXT';
const REMOVE_TODO = 'REMOVE_TODO';
let nextId = 0;
//the action is whats performed to alter state
//addItem is an action creator and nees to return an action
//an object with a type property
export const AddToDo = (text) => {
return {
type: ADD_TODO,
id: nextId++,
text
};
}
//action that updates input text
export const UpdateText = (text) => {
return {
type: UPDATE_TEXT,
text
};
}
// export const RemoveToDo = (id) => {
// return {
// type: REMOVE_TODO,
// id
// };
// }
//initial state of items and text
const initialState = {
items: [],
text: ''
}
//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.
//Adds a new to do item
//state is initialstate
export const ToDoState = (state = initialState, action) => {
//looks at the action type
//returns current state plus the new state
switch(action.type) {
case ADD_TODO:
//if add_todo action update items with item text
return [...state, {id: action.id, text: action.text }]
//returns state by default
case UPDATE_TEXT:
state.UpdateText = action.text;
return state;
default:
return state;
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
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'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment