get initialState value in reducer from action inRedux - reactjs

Question

I am new in redux, I created a initialState in reducer.jsx like that:
const initState = {
loading: false,
todos: [],
todo: null,
};
Then in action.jsx, I want to use the value 'todo' of initState. How can I do that. I try to use useSelector but it is impossible because useSelector cannot be used in action

Answer 1

Try to learn redux-toolkit. It's a lot easier to learn than redux and createSlice api in redux-toolkit is what you find right now.
https://redux-toolkit.js.org/api/createslice

Answer 2

First of Create store using redux then install react-redux library for state management with react. follow code below step by step.
Step - 1
// redux.js
import { createStore } from 'redux';
const store = createStore(rootReducer);
export default store;
Step - 2
// rootReducer.js
import { combineReducers } from 'redux';
import todosReducer from './todosReducer';
const rootReducer = combineReducers({
todos: todosReducer,
});
export default rootReducer;
Step - 3
// todosReducer.js
const initState = {
loading: false,
todos: [],
todo: null,
};
const todosReducer = (state = initState, action) {
switch(action.type) {
case 'add_todo': {
return [
...state,
action.payload.todo
]
}
default:
return state;
}
}
Step - 4
//todosAction.js
export const addTodo = (todo) => {
return({
type:'add_todo',
payload: {
todo
}
})
};
Step - 5
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from '../store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
you can avoid file path choose yourself. import correct file path.
Step - 5
// Todos.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {addTodo } from './todosActions';
const Todos = () => {
const { todos } = useSelector(state => state.todos);
const dispatch = useDispatch();
useEffect(() => {
console.log("todos", todos); // show all todos state
} ,[])
const todo = {
id: 1,
title: "redux is state management library"
}
const todoHandler = () => {
dispatch( addTodo(todo));
}
return(
<div>
// Todos Here
<button onClick={todoHandler}> add todo </button>
</div>
);
}