Comment accéder à des éléments spécifiques dans un objet de tableaux dans des réducteurs

Question 1

Je souhaite basculer la propriété terminée d'un élément en cliquant sur. Le problème est que je ne sais pas comment faire cela dans l'état réducteur. La propriété est stockée à l'intérieur d'un objet de tableaux, ce qui rend difficile sa localisation dans le réducteur.

App.js

import React,{ useReducer,useState } from 'react';
import logo from './logo.svg';
import './App.css';
import {reducer, initialState} from "./reducers/reducer"

function App() {
  const [item,setItem] = useState("")
  const [state,dispatch] = useReducer(reducer,initialState)
const handleCompleted = () => {
  dispatch({type:"TOGGLE_COMPLETED",payload:0})
  console.log(state[0])
}
const handleChanges = e => {
  setItem(e.target.value)
}
const addTodo = e => {
  dispatch({type:"ADD_TODO",newItem:{item:item,id:Date.now(),completed:false}})
  e.preventDefault()
  console.log(state)
}
  return (
    <form onSubmit={addTodo}>
      <button>submitTodo</button>
      <input onChange={handleChanges} value={item} />
      <div>
      <button onClick={handleCompleted}>completed</button>
      {state.list.map(i => <p key ={i.id}>{i.item}</p>)}
      </div>
    </form>
  );
}

export default App;

Reducer.js

export const initialState = {

        list :[{item: 'Learn about reducers',
        completed: false,
        id: 3892987589}]
}




export const reducer = (state,action) => {
    switch(action.type){
        case "TOGGLE_COMPLETED" : 
        return state.list[action.payload].completed = !state.list[action.payload].completed

        case "ADD_TODO" : 
        return {...state,list:[...state.list,action.newItem]}


        default:
            return state}

        }

javascript reactjs react-redux

0

tg marcus 4 nov. 2019 à 07:45

Answer

Vous pouvez modifier la fonction comme suit dans votre App.js

const handleCompleted = (id) => {
  dispatch({type:"TOGGLE_COMPLETED",payload:id})
}

Dans la fonction de rendu changer <button onClick={handleCompleted}>completed</button> en

{state.list.map(i => <p key ={i.id}>{i.item}<button onClick={this.handleCompleted.bind(this, i,id)}>completed</button></p>)}<button onClick={this.handleCompleted.bind(this, id)}>completed</button>

Et dans Reducers.js

Remarque: Habituellement, vous créez une carte d'ID correspondant aux éléments pour faciliter les mises à jour. Mais cela fonctionnerait aussi pour l'instant.

export const reducer = (state,action) => {
    switch(action.type){
        case "TOGGLE_COMPLETED" : 
        const modifiedState = state.map(item=> {
          if(item.id === action.payload.id){
            return {
              ...item,
              completed: true
            }
          }
          return item
        });
        return modifiedState

        case "ADD_TODO" : 
        return {...state,list:[...state.list,action.newItem]}


        default:
            return state}

        }

0

Rishi Raj 4 nov. 2019 à 05:04

Question 2