I'm curious as to why my state todos were named todo instead of todos in the redux dev tools. Where did that name come from? There is no initial state, which makes me wonder.
I'm currently following a Udemy course by Stephen Grider, but I am working with todos instead of streams for revision.
Why do I have to access it using state.todo instead of state.todos?
Json server db.json file (api file)
{
"todos": [
{
"title": "lorem ipsum ",
"description": "lorem ipsum",
"id": 4
}
]
}
todoReducer.js
import _ from 'lodash';
import {
CREATE_TODO,
EDIT_TODO,
FETCH_TODO,
FETCH_TODOS,
DELETE_TODO
} from '../actions/types';
export default (state = {}, action) => {
switch (action.type) {
case FETCH_TODOS:
return { ...state, ..._.mapKeys(action.payload, 'id') };
case CREATE_TODO:
case FETCH_TODO:
case EDIT_TODO:
return { ...state, [action.payload.id]: action.payload };
case DELETE_TODO:
return _.omit(state, action.payload);
default:
return state;
}
};
actions/index.js
import todos from '../apis/todos';
import history from '../history';
import {
SIGN_IN,
SIGN_OUT,
CREATE_TODO,
EDIT_TODO,
FETCH_TODO,
FETCH_TODOS,
DELETE_TODO
} from './types';
export const signIn = userId => {
return { type: SIGN_IN, payload: userId };
};
export const signOut = () => {
return { type: SIGN_OUT };
};
export const fetchTodos = () => async dispatch => {
const response = await todos.get('/todos');
dispatch({ type: FETCH_TODOS, payload: response.data });
};
export const createTodo = formValues => async dispatch => {
const response = await todos.post('/todos', formValues);
dispatch({ type: CREATE_TODO, payload: response.data });
history.push('/');
};