随笔分类 - Redux
摘要：We will learn how to use store.subscribe() to efficiently persist some of the app’s state to localStorage and restore it after a refresh. To save data
阅读全文
摘要：We will learn how to start a Redux app with a previously persisted state, and how it merges with the initial state specified by the reducers. The init
阅读全文
摘要：We will create an anction creator to manage the dispatch actions, to keep code maintainable and self-documenting by extracting action creators from th
阅读全文
摘要：Code to be refactored: class FilterLink extends Component { componentDidMount() { const { store } = this.context; this.unsubscribe = store.subscribe((
阅读全文
摘要：Code to be refacted: const AddTodo = (props, { store }) => { let input; return ( <div> <input ref={node => { input = node; }} /> <button onClick={() =
阅读全文
摘要：Learn how to use the that comes with React Redux instead of the hand-rolled implementation from the previous lesson. Code to be refactored: class Visi
阅读全文
摘要：Previously, we wrote the Provider component by ourself: class Provider extends Component { getChildContext() { return { store: this.props.store }; } r
阅读全文
摘要：We have to write a lot of boiler plate code to pass this chore down as a prop. But there is another way, using the advanced React feature called conte
阅读全文
摘要：n the previous lessons, we used this tool to up level variable to refer to the Redux chore. The components that access this chore, such as the contain
阅读全文
摘要：Clean TodoApp Component, it doesn't need to receive any props from the top level component: const TodoApp = () => ( <div> <AddTodo /> <VisibleTodoList
阅读全文
摘要：Code to be refactored: const AddTodo = ({ onAddClick }) => { let input; return ( <div> <input ref={node => { input = node; }} /> <button onClick={() =
阅读全文
摘要：Code to be refacted: const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(t
阅读全文
摘要：Learn how to avoid the boilerplate of passing the props down the intermediate components by introducing more container components. Code to be refactor
阅读全文
摘要：Finally, I just noticed that the to-do app component doesn't actually have to be a class. I can turn it into a function. I prefer to-do that when poss
阅读全文
摘要：Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todos, visibilityFilter } = this.props; const visibleT
阅读全文
摘要：Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todos, visibilityFilter } = this.props; const visibleT
阅读全文
摘要：The code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todos, visibilityFilter } = this.props; const visi
阅读全文
摘要：/** * A reducer for a single todo * @param state * @param action * @returns {*} */const todo = ( state, action ) => { switch ( action.type ) { ...
阅读全文
摘要：/** * A reducer for a single todo * @param state * @param action * @returns {*} */const todo = ( state, action ) => { switch ( action.type ) { ...
阅读全文
摘要：Learn how to create a React todo list application using the reducers we wrote before./** * A reducer for a single todo * @param state * @param action ...
阅读全文
