Using React-redux here and having a bit of an issue, that some of you might help with.
The user can create 'Jobs' (posts) and also remove them. Adding them is no issue and the reducer returns what is expected. However, once I delete a job from the (firebase) database I trigger a new fetch for the current jobs, but the reducer still returns the old jobs. Am I missing something?
Before deleting, this is how the jobs objects looks like:
activeJobs= {
-KrkPPy4ibSraKG-O49S: {
title: 'Help',
location: 'etc,
...
},
-KrkPPy4ibSraKG-O49S: {
title: 'Help',
location: 'etc,
...
} and so on
}
When I delete them all I get this {} back from the server. Expected.
What is not expected is that my reducer still returns the old jobs and my components do not re-render.
I dispatch an action after fetching the jobs:
firebase.database().ref(`/jobs/activeJobs/${currentUser.uid}`)
.on('value', snapshot => {
console.log('new activeJobs ===', snapshot.val());
dispatch({
type: FETCH_JOBS_SUCCESS,
payload: snapshot.val()
});
});
snapshot.val() does contain the new updated jobs.
Then here is the reducer that handles the action:
switch (action.type) {
case FETCH_JOBS_SUCCESS:
// ...state contains the OLD jobs and action.payload contains {}. Why is is not overriding it the old jobs?
return { ...state, ...action.payload };
default:
return state;
}
Why is my reducer failing?
The { ...state, ...action.payload } syntax actually mean : build a new object by taking every prop of state and adding every props of action.payload. In your case, you just get a new object that is similar to state, since ...action.payload is an empty object.
Change your action to
return Object.assign({}, state, {activeJobs : action.payload});
Related
I am learning front-end and trying making an Angular app using NgRx for state management.
I have a table of Messages. I want to remove and add messages to store.
I am able to remove rows using a reducer function as shown below.
function RemoveHandler(state: StoreMessages, action) {
return {
...state,
selections: state.selections.filter(messageId => messageId !== action.messageId),
messages: state.messages.filter(item => item.messageId !== action.messageId),
all: state.all.filter(item => item.messageId !== action.messageId)
};
}
This works fine, but my logic for add message functionality is not working.
function AddHandler(state: StoreMessages, action) {
return {
...state,
messages: state.messages.push(action.newMessage),
all: state.all.push(action.newMessage)
};
}
The problem is that pop method return length of array and hence length is assigned to 'messages' and 'all' properties of my state. How can I add new messages to my state. Any help is appreciated.
you don't need the array.push method in the reducer. the first code work, because you are filtering an array that is in the state. to add data to the state simply assign it like
function AddHandler(state: StoreMessages, action) {
return {
...state,
messages: action.newMessage,
all: action.newMessage
};
}
or if you are insert an array
function AddHandler(state: StoreMessages, action) {
return {
...state,
messages: [...action.newMessage],
all: [...action.newMessage]
};
}
I'm quite new to coding and I'm currently practicing the useReducer() hook in React to manage some state in a simple todo app.
I'm having trouble when trying to implement the TOGGLE_TODO action. I've done it before using arrays, but as I'll likely be working with a lot of objects, I'm trying to figure out why I can't get this right. I'd say I'm learning by failing, but all I'm learning is how to switch the computer off and walk away!
Each time I toggle, I'm passing the state with the spread operator, I've tried it throughout all of the item, I've logged out the key and action.payload to make sure I'm getting a match (it works when I do a simple alert with matching).
I'm aware that the toggle isn't a toggle yet, I was just trying to simply get complete to be true.
I've tried a multitude of things to return state, I've added return to the beginning of the statement, and I"ve encountered some weird bugs along the way. As mentioned, this is quite simple state for now, but it will be more complex in another project I'm working on, so useState get's quite messy.
Any help on what I'm doing wrong here would be highly appreciated.
const initialAppState = {
isOpen: true,
todos: {}
};
export const ACTIONS = {
TOGGLE_MODAL: "toggle-modal",
ADD_TODO: "add-todo",
TOGGLE_TODO: "toggle-todo"
};
const reducer = (state, action) => {
// switch statement for actions
switch (action.type) {
case ACTIONS.TOGGLE_MODAL:
return { ...state, isOpen: !state.isOpen };
case ACTIONS.ADD_TODO:
return {
...state,
todos: {
...state.todos,
// Object is created with Unix code as the key
[Date.now()]: {
todo: action.payload.todo,
complete: false
}
}
};
case ACTIONS.TOGGLE_TODO:
// Comparing the key and the action payload. If they match, it should set complete to 'true'. This will be updated to a toggle when working.
Object.keys(state.todos).map((key) => {
if (key === action.payload) {
return {
...state,
todos: { ...state.todos, [key]: { complete: true } }
};
}
return state;
});
default:
throw new Error("Nope. not working");
}
};
In the render, I pass the key as an id so it can get returned with the payload.
Here is the dispatch function from the component...
const Todo = ({ id, value, dispatch }) => {
return (
<div className="todo">
<h1>{`Todo: ${value.todo}`}</h1>
<p>Done? {`${value.complete}`}</p>
<button
onClick={() =>
dispatch({
type: ACTIONS.TOGGLE_TODO,
payload: id
})
}
>
Mark as Done
</button>
</div>
);
};
and the render is using Object.entries which all works just fine. There were times when I'd get an error, or the initial todo would disappear, so I knew that state wasn't being updated correctly.
Here is the code on CodeSandbox too. I'll update here if I get it working, but I've been stuck here a couple of days. :-(
You were almost there, good idea to index your items with Date.now()!
Only a few issues in the TOGGLE_TODO case:
your reducer should always return a state, your return statement should be at the end of the case, but you put it with the map's function
your reducer should compute a new state, not mutate the current state. So you have to create a new todo object with the complete property.
Here is how it goes:
case ACTIONS.TOGGLE_TODO:
const newTodos = Object.keys(state.todos).map((key) => {
if (key === action.payload) {
return { ...state.todos[key], complete: true } // create a new todo item
}
else {
return state.todos[key]; // keep the existing item
}
});
return {...state, todos: newTodos};
I'm a beginner to Redux and having trouble.
Somehow after every action, my whole store is completely cleared and only current action is executed. I'm going to describe the situation with screenshot of action log.
Here is my action:
function writeProduct(id) {
return {
type: 'WRITE_PRODUCT',
id
}
}
Here is my reducer:
case 'WRITE_PRODUCT':
console.log("WRITE PRODUCT ACTION: ", action);
console.log("state: ",state);
return {
productID: action.id
};
And here is the consoled log during the dispatch of writeProduct action.
https://cdn1.imggmi.com/uploads/2018/5/9/c4cfc7debab662dfe241889d86254cd1-full.png
What I do wrong? Why after every dispatch previous store is overwritten?
You're overwriting the previous state in your reducer.
You should include all the previous state and only change what the reducer should.
Eg.
In your reducer:
return {
...state,
productID: action.id
};
Notice the ...state part, which includes all the previous state in the result.
I'd suggest you review the redux docs on immutable updates
Also, your action object isn't FSA compliant, should probably read about that too.
hmmm i don't know why the whole store is wiped out but
case 'WRITE_PRODUCT':
console.log("WRITE PRODUCT ACTION: ", action);
console.log("state: ",state);
return {
productID: action.id
};
should be
case 'WRITE_PRODUCT':
console.log("WRITE PRODUCT ACTION: ", action);
console.log("state: ",state);
return {
...state,
productID: action.id
};
```
state is passed to your reducer function
Let's say i have a rootreducer like below.
const rootR = combineReducers({
topics,
...
});
the topics reducer
function topics(state = { topics=[], error: null}, action){
switch (action.type){
case types.FETCH_TOPICS_SUCCESSFULLY:
const { topics } = action;
return {
...state,
topics,
};
default:
return state;
}
};
And when i fire the related action i get my state with repeatable properties state.topics.topics instead of state.topics
Is there any way to avoid this repeating (topics.topics)?
Thanks in advance
Looking at the initialState of your topics reducer, the state object accessible to topics reducer has this structure:
{
topics: [],
error: null
}
So when you combineReducers like this:
const rootR = combineReducers({
topics,
anotherReducer,
someOtherReducer.
// ...
});
resulting global app state is going to look like this:
{
topics: {
topics: [],
error: null
},
anotherReducer: {
// ...
},
someOtherReducer: {
// ...
},
// ...
}
So if you want to access topics array from global state, you need to do state.topics.topics.
You have two things under state.topics, an array of topics and error.
Hence let's rename second topics key to items to avoid confusion.
(it is unavoidable to have a second key to store the array because you also want error)
thus we have:
state.topics = {
items: [],
error: null,
}
Instead of state.topics.topics, now we access state.topics.items
To achieve this, initialstate passed to topics reducer has to be:
function topics(state = { items = [], error: null }, action){
//...
}
Now inside the reducer FETCH_TOPICS_SUCCESSFULLY, we want to append an array action.topics to items, like this (without mutating our current state):
case types.FETCH_TOPICS_SUCCESSFULLY:
const { topics } = action;
return {
...state,
items: [
...state.items,
...topics
],
};
#markerikson is right, the state variable passed in the function is actually topics once FETCH_TOPICS_SUCCESSFULLY is called, so it's better to do return topics there.
But given your condition, instead of return {...state, topics} or return topics, you can also do return Object.assign({}, state, topics). This will create a new object with all properties from previous state and topics merged together.
You're double-nesting things. The topics reducer will only see the "topics" slice of state. So, instead of returning {...state, topics}, just do return topics.
update
Your edit to the question changes the situation considerably.
Originally, you had:
function topics(state = {}, action){
Now, you have:
function topics(state = { topics=[], error: null}, action){
I'll admit I'm a bit confused at this point as to what your desired state structure actually should be.
Looking at your original definition, it seemed like you were misunderstanding how combineReducers works, and redundantly trying to return a new object that contained a field/slice named "topics". Now, it looks like the root-level "topics" slice itself has a field named "topics" as well.
Are topics and error supposed to be at the root of your state tree? Or, are they both really supposed to be part of the top-level "topics" slice? If that's really what you want, then you've defined the state tree as needing to be topics.topics.
Also, to answer #free-soul: no, in the original example, return topics would not mutate state, because it's just returning whatever was in the action. Even if the action.topic field was literally the same array that used to be in the state, the result would just be a no-op.
Bear with me here as this question pertains to my first test app using either React, Redux or react-redux. Docs have gotten me far and I have a mock banking app that mostly works. My state object looks roughly like this:
{
activePageId: "checking",
accounts: [
checking: {
balance: 123,
transactions: [
{date, amount, description, balance}
]
}
]
}
I have just two actions:
1. CHANGE_HASH (as in url hash). This action always works as expected and all the reducer does is update the state.activePageId (yes, I'm cloning the state object and not modifying it). After the action, I can see the state has changed in the Redux store and I can see that React has updated.
function changeHash(id) {
return {
type: "CHANGE_HASH",
id: id
}
}
2. ADD_TRANSACTION (form submission). This action never updates React, but it always updates the Redux store. The reducer for this action is updating state.accounts[0].balance and it's adding a transaction object to the array state.accounts[0].transactions. I don't receive any errors, React just doesn't update. HOWEVER, if I dispatch a CHANGE_HASH action React will catch up and display all of the ADD_TRANSACTION state updates properly.
function addTransaction(transaction, balance, account) {
return {
type: "ADD_TRANSACTION",
payload: {
transaction: transaction,
balance: balance,
account: account
}
}
}
My reducer...
function bankApp(state, action) {
switch(action.type) {
case "CHANGE_HASH":
return Object.assign({}, state, {
activePageId: action.id
});
case "ADD_TRANSACTION":
// get a ref to the account
for (var i = 0; i < state.accounts.length; i++) {
if (state.accounts[i].name == action.payload.account) {
var accountIndex = i;
break;
}
}
// is something wrong?
if (accountIndex == undefined) {
console.error("could not determine account for transaction");
return state;
}
// clone the state
var newState = Object.assign({}, state);
// add the new transaction
newState.accounts[accountIndex].transactions.unshift(action.payload.transaction);
// update account balance
newState.accounts[accountIndex].balance = action.payload.balance;
return newState;
default:
return state;
}
My mapStateToProps
function select(state) {
return state;
}
What am I missing here? I'm under the impression that React is supposed to update as the Redux storeis updated.
Github repo:
Deployment bank demo
p.s. I lied about not having any errors. I do have a number of warnings
""Warning: Each child in an array or iterator should have a unique "key" prop..."
I'm already giving them a key prop set to it's index. I doubt that has anything to do with my issue though.
The problem is in this piece of code:
// clone the state
var newState = Object.assign({}, state);
// add the new transaction
newState.accounts[accountIndex].transactions.unshift(action.payload.transaction);
// update account balance
newState.accounts[accountIndex].balance = action.payload.balance;
Cloning the state object doesn't mean you can mutate the objects it is referring to. I suggest you to read more about immutability because this isn't how it works.
This problem and solution to it are described in detail in Redux “Troubleshooting” docs so I suggest you to read them.
https://redux.js.org/troubleshooting
I also suggest you to take a look at Shopping Card example in Flux Comparison for Redux because it shows how to update nested objects without mutating them in a similar way to what you are asking.
https://github.com/voronianski/flux-comparison/tree/master/redux