Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const SAVE_TODO = 'SAVE_TODO'
export function saveTodo(todo) {
return {
type: SAVE_TODO,
payload: todo
};
}
// Other imports...
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import promiseMiddleware from 'redux-promise-middleware'
import todoReducer from './store/reducers'
const store = createStore(todoReducer, applyMiddleware([promiseMiddleware]))ReactDOM.render(
<Provider store={store}> { }
<App />
</Provider>,
document.getElementById('root')
)
import React, { Component } from 'react
import TodoContext from './path/to/todo-context';
export const Header = (props) => {
return (<div className='header-wrap'>
<h1 className='header-h1'>{props.value}</h1>
</div>)
}
const Card = (props) => {
return (<div className='card-container'>
<div className='img-container'>
<img src={props.src} alt='card-img' />
</div>
<Header value={props.title} />
<div className='desc-wrap'>
<p>{props.description}</p>
</div>
</div>)}
class TodoContainer extends Component {
render () {
return (<TodoContext.Consumer>{context => (
<div className='todo-container'>
{context.todos.map(todo) => {
return (<Card key={todo.id} title={todo.title}
description={todo.description}
/>)
}
}</div>)}
</TodoContext.Consumer>)
}
}
import TodoContext from './todo-context';
class App extends Component {
state = {
todos: [
{ id: 1091293, title: 'order groceries', description: 'something'},
{ id: 1093123, title: 'book a cab', description: 'some other thing'}
]
}
saveTodo = todo => {
const updatedTodos= [...this.state.todos];
// logic to add the todo
this.setState({ todos: updatedTodos });
}
removeTodo = todo => {
const updatedTodos = [...this.state.todos];
// logic to remove todo
this.setState({ todos: updatedTodos });
};
render() {
return (
<TodoContext.Provider
value={{
todos: this.state.todos,
saveTodo: this.saveTodo,
removeTodo: this.removeTodo
}}
>
...
</TodoContext.Provider>
);
}
}
export default App;
import React from 'react'export default React.createContext({})
// Other imports...
import TodoContext from './path/to/todo-context'; // The path to the file where you called React.createContext()
class App extends Component {
render() {
return (
<TodoContext.Provider value={{
todos: []
}
}>
{/* Any child or child of a child component in here can access 'TodoContext'*/}
</TodoContext.Provider />
);
}
}
const initialState = {
todos: [
{ id: 1091293, title: 'order groceries', description: 'something'},
{ id: 1093123, title: 'book a cab', description: 'some other thing'},
// ...
]
}
const todoReducer = (state = initialState, action) => {
switch (action.type) {
case SAVE_TODO:
// todo updating logic
return { ...state, todos: updatedTodos }
case REMOVE_TODO:
// todo updating logic
return { ...state, todos: updatedTodos }
default:
return state
}
}
import React, { Component } from 'react
export const Header = (props) => {
return (<div className='header-wrap'>
<h1 className='header-h1'>{props.value}</h1>
</div>)
}
export const Card = (props) => {
return (<div className='card-container'>
<div className='img-container'>
<img src={props.src} alt='card-img' />
</div>
<Header value={props.title} />
<div className='desc-wrap'>
<p>{props.description}</p>
</div>
</div>)
}
class TodoContainer extends Component {
render () {
return (
<div className='todo-container'>
{this.props.todos.map(todo) => {
return (<Card key={todo.id} title={todo.title}
description={todo.description}
/>)
}
}</div>)
}
}
const mapStateToProps = state => {
return {
todos: state.todos
}
}
const mapDispatchToProps = dispatch => {
return {
saveTodo: (todo) => dispatch(saveTodo(todo)),
removeTodo: (todo) => dispatch(removeTodo(todo))
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(TodoContainer)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment