Skip to content

Instantly share code, notes, and snippets.

@anotherxx
Created September 6, 2017 00:50
Show Gist options
  • Save anotherxx/22c6fb3224eb306e7599af30d524caf2 to your computer and use it in GitHub Desktop.
Save anotherxx/22c6fb3224eb306e7599af30d524caf2 to your computer and use it in GitHub Desktop.
function todo(state, action)
{
switch(action.type)
{
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
completed: false
}
break;
case 'TOGGLE_TODO':
if(state.id == action.id)
return {...state , completed: !state.completed};
else
return state;
break;
default:
return state;
}
}
function todos(state = [] , action)
{
switch(action.type)
{
case 'ADD_TODO':
return [...state , todo(undefined, action)]
break;
case 'TOGGLE_TODO':
return state.map((t) =>
{
return todo(t,action);
})
default:
return state;
}
}
function visibilityFilter(state = 'SHOW_ALL' , action)
{
switch (action.type)
{
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state;
}
}
function getVisibleTodos(todos,filter)
{
switch (filter)
{
case 'SHOW_ALL':
return todos;
break;
case 'SHOW_COMPLETED':
return todos.filter((t) =>
{
return t.completed == true;
});
break;
case 'SHOW_ACTIVE':
return todos.filter((t) =>
{
return t.completed == false;
});
break;
}
}
const {createStore} = Redux;
const {combineReducers} = Redux;
const UnionReducers = combineReducers({
todos: todos,
visibilityFilter: visibilityFilter
});
const Todo = ({onClick, completed, text}) =>
{
return (
<li onClick={onClick}
style={{
textDecoration:
completed ? 'line-through' : 'none'
}}>{text}</li>
)
};
const TodoList = ({todos , onTodoClick}) =>
{
return (
<ul>
{todos.map((todo) =>
<Todo key={todo.id}
completed={todo.completed}
text={todo.text}
onClick={() => onTodoClick(todo.id)}
/>
)}
</ul>
)
};
//context in stateless functional component also has access to context
//react pass context as second parametr
const Footer = ({visibilityFilter, onFilterClick}) =>
{
return (
<p>
<span>Show:</span>
<FilterLink filter='SHOW_ALL'
children="All" />
<FilterLink filter='SHOW_ACTIVE'
children="Active" />
<FilterLink filter='SHOW_COMPLETED'
children="Completed" />
</p>
);
}
const Link = ({active,children,onClick}) =>
{
if(active)
return <span>{children}</span>;
return (
<a href="#"
onClick={(e) => {
e.preventDefault();
onClick();
}}>{children}</a>
);
};
class VisibleTodoList extends React.Component
{
componentDidMount()
{
const {store} = this.context;
this.unsubscribe = store.subscribe(() =>
{
console.log("STATE UPDATES AND I AM RERENDER " + "VISIBLETODOLIST")
this.forceUpdate();
});
}
componentWillUnmount()
{
this.unsubscribe();
}
render()
{
const props = this.props;
const {store} = this.context;
const state = store.getState();
return (
<TodoList todos={
getVisibleTodos(state.todos,state.visibilityFilter)
}
onTodoClick={(id) =>
{
store.dispatch({
type: 'TOGGLE_TODO',
id: id
})
}}
/>
);
}
}
//In that section we specify which context props we want get from parent context,if we dont specify that ,we not receive context props
VisibleTodoList.contextTypes = {
store: React.PropTypes.object
}
class FilterLink extends React.Component
{
componentDidMount()
{
const {store} = this.context;
this.unsubscribe = store.subscribe(() =>
{
console.log("redux state updates: i am rerender");
console.log("FILTERLINK COMPONENT");
this.forceUpdate();
});
}
componentWillUnmount()
{
this.unsubscribe();
}
render()
{
const props = this.props;
const {store} = this.context;
const state = store.getState();
return (
<Link active={
props.filter === state.visibilityFilter
}
onClick={() =>
{
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: props.filter
})
}}
>
{props.children}
</Link>
);
}
}
FilterLink.contextTypes = {
store: React.PropTypes.object
};
let nextTodoId = 1;
const TodoApp = () =>
{
return (
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
);
}
/*
class Provider extends React.Component
{
//specify props which recive all child components
getChildContext()
{
return {
store : this.props.store
}
}
render()
{
return this.props.children;
}
}
//if we dont specify that part,child components doesnot recieve specifing props
Provider.childContextTypes = {
store: React.PropTypes.object
}
*/
const {Provider} = ReactRedux;
const mapStateToTodoListProps = (state) =>
{
return {
todos: getVisibleTodos(state.todos,state.visibilityFilter)
}
};
const mapDispatchToTodoListProps = (dispatch) =>
{
return {
onTodoClick: (id) =>
{
dispatch({
type: "TOGGLE_TODO",
id: id
})
}
};
};
const {connect} = ReactRedux;
//Определяем в какой компонент хотим внедрить State и Dispatch методы
const VisibleTodoListx = connect(
mapStateToTodoListProps,
mapDispatchToTodoListProps
)(TodoList);
let AddTodo = (props) =>
{
return (
<div>
<input ref={(node) => input = node}/>
<button onClick={() =>
{
props.dispatch({
type: 'ADD_TODO',
text: input.value,
id: nextTodoId++
});
input.value = '';
}}>Add Todo</button>
</div>
)
}
AddTodo = connect(
null,
dispatch =>
{
return {dispatch};
}
)(AddTodo);
console.log("dfsafa");
console.dir(AddTodo);
ReactDOM.render(<Provider store={createStore(UnionReducers)}>
<TodoApp/>
</Provider>,
document.getElementById('root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment