How to update local state when redux state is updated(react-redux) - reactjs

Question

I have state that is managed inside a component.
And I'm using data from other component by storing them into the redux store.
However, at the end, i'm trying to collect all the data to make an api call.
const [projectData, setProjectData] = useState({})
const { userData } = useSelector((state) => state.userManage);
useEffect(() => {
let newUsers = userData.map((x,i)=>({user_id:x.user_id, sub_user_id:x.sub_user_id}))
setProjectState((state) =>({...state, users:newUsers}))
}, [userData ]);
// this is handler
const handleClick = () =>{
dispatch(action.createProject(projectData));
}
I'm trying to update local state whenever the data i'm subscribing is changing.
Somehow it doesn't update correctly. When I don't use 'map' function and just
setProjectState((state) =>({...state, users: userData})) <= This works.
But it copys everything inside of userData,
so I'm using map function to pick specific data, not all data. but it is not working.
for example:
//redux store state
userData={user_id: 0, sub_id: [1,2,3], useless:"sda", useless2:"asd" }
I want to update and add local state only with user_id and sub_id

Answer 1

The code you posted works just fine, maybe you can provide an example that demonstrates your problem assuming you meant setProjectData instead of setProjectState:
const { Provider, useDispatch, useSelector } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const { useState, useEffect } = React;
const initialState = {
userData: [],
};
//action types
const ADD = 'ADD';
//action creators
const userid = ((id) => () => id++)(1);
const sub = ((id) => () => id++)(1);
const add = () => ({
type: ADD,
payload: {
user_id: userid(),
sub_user_id: sub(),
other: 'not used',
},
});
const reducer = (state, { type, payload }) => {
if (type === ADD) {
return {
...state,
userData: [payload, ...state.userData],
};
}
return state;
};
//selectors
const selectUserData = (state) => state.userData;
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(() => (next) => (action) =>
next(action)
)
)
);
const UserList = () => {
const [projectData, setProjectData] = useState({});
const userData = useSelector(selectUserData);
useEffect(() => {
let newUsers = userData.map((x, i) => ({
user_id: x.user_id,
sub_user_id: x.sub_user_id,
}));
setProjectData((state) => ({
...state,
users: newUsers,
}));
}, [userData]);
return (
<div>
userData:
<pre>{JSON.stringify(userData, undefined, 2)}</pre>
projectData:
<pre>{JSON.stringify(projectData, undefined, 2)}</pre>
</div>
);
};
const App = () => {
const dispatch = useDispatch();
return (
<div>
<button onClick={() => dispatch(add())}>
add data
</button>
<UserList />
</div>
);
};
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>
However; instead of copying the data it would be best to just write a selector to get the data the way you want it:
const { Provider, useDispatch, useSelector } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const { createSelector } = Reselect;
const initialState = {
userData: [],
};
//action types
const ADD = 'ADD';
//action creators
const userid = ((id) => () => id++)(1);
const sub = ((id) => () => id++)(1);
const add = () => ({
type: ADD,
payload: {
user_id: userid(),
sub_user_id: sub(),
other: 'not used',
},
});
const reducer = (state, { type, payload }) => {
if (type === ADD) {
return {
...state,
userData: [payload, ...state.userData],
};
}
return state;
};
//selectors
const selectUserData = (state) => state.userData;
const selectProjectData = createSelector(
[selectUserData], //re use selectUserData
(userData) =>
//modify user data to project data
userData.map((x, i) => ({
user_id: x.user_id,
sub_user_id: x.sub_user_id,
}))
);
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(() => (next) => (action) =>
next(action)
)
)
);
const UserList = () => {
//no state, no effect, just select the way you want it
const projectData = useSelector(selectProjectData);
//if you want userData as well you can select that too
// const userData = useSelector(selectUserData)
return (
<div>
<pre>{JSON.stringify(projectData, undefined, 2)}</pre>
</div>
);
};
const App = () => {
const dispatch = useDispatch();
return (
<div>
<button onClick={() => dispatch(add())}>
add data
</button>
<UserList />
</div>
);
};
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/4.0.0/reselect.min.js"></script>
<div id="root"></div>