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
You can’t perform that action at this time.