How i can update single filed of array in state in redux? - redux

Question

I need update one field in a state => books => (one indicated book) => (one of book field).
I try do this that
export default function(state = initialState, action){
case EDIT_BOOK:
return {
...state,
books :{
...state.books,
title: action.title
}
}
My state looks like
books:[
{
"_id": "5cfa9698361a8427b85dc79f",
"title": "Krzyżacy",
"author": "Henryk Sienkiewicz",
"__v": 0,
"state": "toReads"
},
{
"_id": "5cfa9bd1cb5c152ee4269a28",
"title": "Quo Vadis",
"author": "Henryk Sienkiewicz",
"state": "toReads",
"__v": 0
}
]
//Action
export const editBook = (id, title) => dispatch => {
axios
.put(`http://localhost:5000/books/${id}`, title)
.then(res => dispatch({
type: EDIT_BOOK,
payload: id,
newTitle: title
}))
My second problem is thus
Access to XMLHttpRequest at 'http://localhost:5000/books/5cfa9698361a8427b85dc79f' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

You are updating array incorrectly. See this pattern from redux documentation:
https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#updating-an-item-in-an-array
Be carefull and do not change your books from array into object (use output of function updateObjectInArray from above link and put it into your books property)
case EDIT_BOOK:
return {
...state,
// here you are putting object instead of array into books
books :{
...state.books,
title: action.title
}
}
Solution for your second problem is using e.g. nginx in your local development environment for passing requests to your frontend application and backend api to the right address/port.
Nginx configuration will look something like this (simplified, just for giving a right direction):
server {
# port where nginx will run (you will debug your web application on this port from now)
listen 8081;
location / {
# address of your frontend application (e.g. webpack dev server)
proxy_pass http://127.0.0.1:3000;
}
location /backend {
# address of your backennd application
proxy_pass http://127.0.0.1:5000;
}
}
As I wrote above, after that configuration you need to debug application on nginx proxy and not on frontend server (e.g. webpack dev server), but the server should be still running. The nginx proxy application url according to the above configuration will be: http://localhost:8081
And whenever your application would like to call backend api, it will do it this way:
// your old address will change into ...
http://localhost:5000/books/${id}
// ... this new address
/backend/books/${id}