The visibilityFilters reducer sets its slice of store to the new filter it receives from the SET_FILTER action payload. Toggles the completed field for the todo upon receiving the TOGGLE_TODO action. Appends the id to its allIds field and sets the todo within its byIds field upon receiving the ADD_TODO action. It takes a single string variable filter and returns a SET_FILTER action with payload containing the filter itself setFilter creates the action to set the app’s active filter. It takes a single number variable id and returns a TOGGLE_TODO action with payload containing id only 
toggleTodo creates the action to toggle todos. It takes a single string variable content and returns an ADD_TODO action with payload containing a self-incremented id and content addTodo creates the action to add todos. visibilityFilters: A simple string all, completed, or incomplete. It contains a byIds map of all todos and a allIds that contains the list of all ids. 
The Redux portion of the application has been set up using the patterns recommended in the Redux docs:
And finally index renders our app to the DOM. constants holds the constants data for our app. It dispatches the setFilter action to update the selected filter. An active filter is rendered with an underscore. It accepts an activeFilter prop from the parent that indicates which filter is currently selected by the user. Clicking on each one of them filters the todos: VisibilityFilters renders a simple set of filters: all, completed, and incomplete. It dispatches the action to toggle the todo's complete status upon onClick. It renders the todo content, and shows that a todo is completed by crossing it out. Todo is the component that renders a single todo item:. It renders the filtered list of todos when one of the VisibilityFilters is selected. TodoList is the component that renders the list of todos:. When the user clicks on the “Add Todo” button, it dispatches the action (that we will provide using React Redux) to add the todo to the store. It uses a controlled input that sets state upon onChange. AddTodo is the component that allows a user to input a todo item and add to the list upon clicking its “Add Todo” button:. It renders the header, the AddTodo, TodoList, and VisibilityFilters components. TodoApp is the entry component for our app. We have implemented our React UI components as follows: To see how to use React Redux in practice, we’ll show a step-by-step example by creating a todo list app.
0 kommentar(er)
