CODEWITHSUNDEEP
javascriptreactjsredux
htpea
htpea

Reputation: 57

Why my redux state is null but in console everything is working

I'm trying to make todo app but, Every time I input something, my redux developer tools shows an '' (empty string)

my reduce look like this

const TodoReducer = (state = initialState, action) => {
    switch(action.type){
        case 'ADD_TODO':
           return {
               ...state,
               todoList: [...state.todoList, action.item]
           }
    }
}

export default TodoReducer;

my action

export const addTodo = () => {
    return {
        type: 'ADD_TODO',
        item: ''
    }
}

and the App.js

function App() {
  const [input, setInput] = useState('');

  const todoList = useSelector(state => state.todoList)

  const dispatch = useDispatch();

  const addHandler = () => {
    console.log(`adding ${input}`)
    dispatch(addTodo({
      item: input
  }))
    setInput('');
  }
  

  return (
    <div>
        <p>TODO</p>
        <p>{todoList}</p>
        <input type="text"
        value={input}
        onChange={e=> setInput(e.target.value)}
        />

        <button type="button" onClick={addHandler}>Add</button>
    </div>
  );
}

thank you in advance. any help is appreciated

Upvotes: 0

Views: 93

Answers (1)

Amila Senadheera
Amila Senadheera

Reputation: 13235

You forgot to pass the item as an input to the action and return

Change:

export const addTodo = () => {
    return {
        type: 'ADD_TODO',
        item: ''
    }
}

To:

export const addTodo = (item) => {
    return {
        type: 'ADD_TODO',
        item: item
    }
}

And

Change

        <p>{todoList}</p>

To

        <p>
            {Array.isArray(todoList) &&
                todoList.map((item, itemIndex) => (
                    <div key={itemIndex}>{item}</div>
                ))}
        </p>

Upvotes: 2

Related Questions