Updating Redux State Immutably

Question

I am changing the state immutably but this is not working. Basically, I created a function to fetch excel file data. This function works perfectly but when I update the state then the state not updated.

Any idea or any suggestions share with me

Here is my state:

tableData: [],
productsData: []

And here is the reducer where the state updated:

case actionTypes.READ_EXCEL:
            var excel1 = [];
            var excel2 = [];
            const promise = new Promise((resolve, reject) => {
                const fileReader = new FileReader();
                fileReader.readAsArrayBuffer(action.payload);
                fileReader.onload = (e) => {
                    const bufferArray = e.target.result;
                    const wb = { SheetNames:[], Sheets:{} };
                    const ws1 = XLSX.read(bufferArray, {type: "buffer"}).Sheets.Sheet1;
                    const ws2 = XLSX.read(bufferArray, {type: "buffer"}).Sheets.Sheet2;

                    wb.SheetNames.push("Sheet1");
                    wb.Sheets["Sheet1"] = ws1;
                    
                    wb.SheetNames.push("Sheet2");
                    wb.Sheets["Sheet2"] = ws2;

                    const data1 = XLSX.utils.sheet_to_json(ws1);
                    const data2 = XLSX.utils.sheet_to_json(ws2);
                    resolve([ data1, data2 ]);
                }
                fileReader.onerror = (error) => {
                    reject(error);
                };
            })
            promise.then((excelData) => {
                excel1 = excelData[0];
                excel2 = excelData[1];
                
            });
            return {
                ...state,
                tableData: excel1,
                productsData: excel2
                }
        default:
    }
    return state; 
}

In the UI getting state value and state value not updated:

const mapStateToProps = (state) => {
 return {
  items: state.tableData,     <---
  products: state.productsData    <---
 };
}

Answer 1

As promises are async the return statements are getting executed first and then the data is loaded into excel1 and excel2.

case actionTypes.READ_EXCEL:
            var excel1 = [];
            var excel2 = [];
            /*Below line will create a promise, which will be executed asynchronously. 
            So the execution will not wait until promise is executed.
            It will go to next line which is Promise.then()*/ 

            const promise = new Promise((resolve, reject) => {
                const fileReader = new FileReader();
                fileReader.readAsArrayBuffer(action.payload);
                fileReader.onload = (e) => {
                    const bufferArray = e.target.result;
                    const wb = { SheetNames:[], Sheets:{} };
                    const ws1 = XLSX.read(bufferArray, {type: "buffer"}).Sheets.Sheet1;
                    const ws2 = XLSX.read(bufferArray, {type: "buffer"}).Sheets.Sheet2;

                    wb.SheetNames.push("Sheet1");
                    wb.Sheets["Sheet1"] = ws1;
                    
                    wb.SheetNames.push("Sheet2");
                    wb.Sheets["Sheet2"] = ws2;

                    const data1 = XLSX.utils.sheet_to_json(ws1);
                    const data2 = XLSX.utils.sheet_to_json(ws2);
                    resolve([ data1, data2 ]);
                }
                fileReader.onerror = (error) => {
                    reject(error);
                };
            })
           /*here as well the we're just attaching a callback to promise to be executed after promise is fulfilled. so execution will attach the specified callback (excelData arrow function) to promise.then(). 
           And then execution will move to next line which is return statement.*/ 
            promise.then((excelData) => {
                excel1 = excelData[0];
                excel2 = excelData[1];
                
            });
             /*Now here, as the promises are async and will be executed after the fileReader reads data, the values of excel1 and excel2 are not updated but only contain the empty array. 
            And hence your state will have empty arrays in it*/
            return {
                ...state,
                tableData: excel1,
                productsData: excel2
                }
        default:
    }
    return state; 
}

You can do one thing that write the code for reading the data using fileReader into one function which will be executed where you currently have placed dispatch statement in your code. And inside the promise.then() you can call dispatch with the loaded data. so your new code might look like this

// separate function for reading the data
function readExcel(excelData) {
    return dispatch=>{
    const promise = new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.readAsArrayBuffer(excelData);
        fileReader.onload = (e) => {
            const bufferArray = e.target.result;
            const wb = {
                SheetNames: [],
                Sheets: {}
            };
            const ws1 = XLSX.read(bufferArray, {
                type: "buffer"
            }).Sheets.Sheet1;
            const ws2 = XLSX.read(bufferArray, {
                type: "buffer"
            }).Sheets.Sheet2;

            wb.SheetNames.push("Sheet1");
            wb.Sheets["Sheet1"] = ws1;

            wb.SheetNames.push("Sheet2");
            wb.Sheets["Sheet2"] = ws2;

            const data1 = XLSX.utils.sheet_to_json(ws1);
            const data2 = XLSX.utils.sheet_to_json(ws2);
            resolve([data1, data2]);
        }
        fileReader.onerror = (error) => {
            reject(error);
        };
    })
    promise.then((excelData) => {
        excel1 = excelData[0];
        excel2 = excelData[1];
        // Dispatching only after we get the data from fileReader
        dispatch({
            type: actionTypes.READ_EXCEL,
            payload: {
                excel1,
                excel2
            }
        })
      });
   }
}

// In reducer function
case actionTypes.READ_EXCEL:
    return {
        ...state,
        tableData: action.payload.excel1,
        productsData: action.payload.excel2
    }

Answer 2

The new state does not change because your Promise resolves after the return statement, this happens because of the nature of a Promise, it won't block the execution of your function, I would suggest using some middleware like redux-thunk for async logic like in your example reading files. Finally, you pass the excel data to your reducer in order to update the store.