My goal is to update the pause value in my ruducer's object without deleting any of the other data.
Here is my ruducer code:
export const initialState = {
audio: {
sound: false,
index: 0,
name: '',
image: '',
username: '',
pause: false,
},
};
And here is it's case:
case 'TRIGGER_AUDIO':
return {
...state,
audio: action.payload,
};
Here is how I access the audio values:
const [{ audio }, dispatch] = useStateValue();
And this is how I'm trying to update it when I press a button:
<TouchableOpacity
onPress={() =>
dispatch({
type: 'TRIGGER_AUDIO',
payload: {
...state.audio,
pause: true,
},
})
}>
If I understood correctly you need something like this
case 'TRIGGER_AUDIO':
const audio = {...state.audio, ...action.payload};
return {
...state,
audio
};
Related
Hi everyone I have some redux-toolkit issue that I believe comes from immer but cannot be sure.
Using createSlice I am creating reducer to manage open/close/move/add of UI tabs. all of the reducers are working properly except the closeTab reducer.
This is an example of the state at the moment of execution of closeTab reducer:
[{
id: 1,
active: false,
tittle: 'Cute',
},
{
id: 2,
active: true,
tittle: 'Cute',
}]
This is the entire createSlice
export const tabsSlice = createSlice({
name: "tabs",
initialState,
reducers: {
moveTab: (tabs, action: PayloadAction<{ dragIndex: number, hoverIndex: number }>) => {
tabs.splice(action.payload.hoverIndex, 0, tabs.splice(action.payload.dragIndex, 1)[0]);
},
selectTab: (tabs, action: PayloadAction<number>) => {
tabs.forEach(tab => tab.active = tab.id === action.payload);
},
closeTab: (tabs, action: PayloadAction<number>) => {
const isCurrentActive = tabs[action.payload].active;
tabs.splice(action.payload, 1);
if (isCurrentActive && tabs.length !== 0) {
const newActive = action.payload === 0 ? 0 : action.payload - 1;
tabs[newActive].active = true;
}
if (tabs.length === 0) {
tabs.push({
id: Date.now(),
active: true,
tittle: 'Cute2'
})
}
},
addTab: (tabs) => {
tabs.forEach(tab => tab.active = false)
tabs.push({
id: Date.now(),
active: true,
tittle: 'Cute2'
})
},
}
})
As mentioned moveTab, selectTab and addTab work perfectly but when closeTab is executed,
the array is spliced (the tab is removed), but the active property of the state is not changed. And I am sure that at the end of the reducer the state is as I want it.
State should be changed from:
[{
id: 1,
active: false,
tittle: 'Cute',
},
{
id: 2,
active: true,
tittle: 'Cute',
}]
to
[{
id: 1,
active: true,
tittle: 'Cute',
}]
But in the component I am receiving this:
[{
id: 1,
active: false,
tittle: 'Cute',
}]
The array length is changed, but not the active property
false issue selectTab overriding closeTab
i am trying to build a react redux form using the connect() instead useSelector and useDispatch.
I managed to display the list of data and to reset the forms. But i didn't manage to send data. Here is the code:
Reducer.js
const initialState = {
tasks: {
name: "",
age: "",
job: "",
},
list: [
{
id: 0,
name: "Maillard",
age: 35,
job: "soldier",
},
],
};
export const toDoReducer = (state = initialState, action) => {
switch (action.type) {
case "name":
return {
...state,
tasks: {
name: action.payload,
},
};
case "age":
return {
...state,
tasks: {
age: action.payload,
},
};
case "job":
return {
...state,
tasks: {
job: action.payload,
},
};
case "clear":
return {
...state,
tasks: {
name: "",
age: "",
job: "",
},
};
case "add":
return {
...state,
tasks: {
...state.tasks,
id: state.list.length + 1,
},
};
default:
return {
...state,
};
}
};
export default toDoReducer;
import React from "react";
import { connect } from "react-redux";
import {
setName,
setAge,
setJob,
clearForm,
addForm,
} from "../../redux/action";
export const Form = (props) => {
return (
<div>
Name
<input value={props.list.name} onChange={(e) => { props.Name(e.target.value) }} />
Age
<input value={props.list.age} onChange={(e) => { props.Age(e.target.value) }} />
Profession
<input value={props.list.job} onChange={(e) => { props.Job(e.target.value) }} />
<div style={{ padding: 20 }}>
<button onClick={props.Clear}>Reset</button>
<button onClick={props.Add}>Envoyer</button>
</div>
</div>
);
};
const mapDispatchToProps = (dispatch) => {
return {
Name: () => {
dispatch({
type: "name",
setName,
});
},
Age: () => {
dispatch({ type: "age", setAge });
},
Job: () => {
dispatch({
type: "job",
setJob,
});
},
Clear: () => {
dispatch({ type: "clear", clearForm, });
},
Add: () => {
dispatch({)}
// My problem comes from the Add
<!-- begin snippet: js hide: false console: true babel: false -->
type: "add",
addForm
})
}
};
};
const mapStateToProps = (state) => ({
list: state.tasks,
});
export default connect(mapStateToProps, mapDispatchToProps)(Form);
// export default Form;
My problems comes from in mapDispatchToProps, i don't know what to do for the function Add
Your actions should be the ones defining the action type and you should call them in the mapDispatchToProps, not pass them as part of the action.
So your addForm should be something like
const addForm = () => ({
type:'add'
});
and in your mapDispatchToProps it should be like
Add: () => dispatch(addForm()),
But you have the same problem with all your dispatching
for example the Name should be
action
const setName = (payload) => ({
type:'name',
payload
});
mapDispatchToProps
Name: (nameValue) => {
dispatch(setName(nameValue));
},
I'm experiencing some difficulty with trying to map through an objects property which is an array of objects. I get back an error message that .map is undefined, basically saying there is no array. The array i want to map through is education. At times I also get a proxy error that the route is timing out and this loses the profile data i'm fetching and the profile object is empty. Is there anyway to fix this too.
My model:
import mongoose from 'mongoose'
const profileSchema = new mongoose.Schema(
{
experience: [
{
title: {
type: String,
required: true,
},
company: {
type: String,
required: true,
},
location: {
type: String,
},
from: {
type: Date,
required: true,
},
to: {
type: Date,
},
current: {
type: Boolean,
default: false,
},
description: {
type: String,
},
},
],
education: [
{
level: {
type: String,
required: true,
enum: [
'None',
'GCSE or equivalent',
'A-Level or equivalent',
'Certificate of Higher Education',
'Diploma of Higher Education',
'Bachelors',
'Masters',
'PhD',
],
},
school: {
type: String,
required: true,
},
fieldofstudy: {
type: String,
required: true,
},
city: {
type: String,
required: true,
},
from: {
type: Date,
required: true,
},
to: {
type: Date,
},
current: {
type: Boolean,
default: false,
},
},
],
skills: [
{
name: {
type: String,
required: true,
},
yearsExperience: {
type: Number,
required: true,
},
},
],
additionalInfo: {
desiredJobTitle: {
type: String,
},
desiredJobType: {
type: [String],
},
desiredSalary: {
type: Number,
},
readyToWork: {
type: Boolean,
default: false,
},
relocate: {
type: Boolean,
default: false,
},
},
savedJobs: [
{
type: mongoose.Schema.Types.ObjectId,
ref: 'Job',
},
],
user: {
type: mongoose.Schema.Types.ObjectId,
ref: 'User',
},
},
{ timestamps: true }
)
const Profile = mongoose.model('Profile', profileSchema)
export default Profile
My action:
import axios from 'axios'
import {
PROFILE_DETAILS_REQUEST,
PROFILE_DETAILS_SUCCESS,
PROFILE_DETAILS_FAIL,
PROFILE_CREATE_REQUEST,
PROFILE_CREATE_SUCCESS,
PROFILE_CREATE_FAIL,
PROFILE_CREATE_EDUCATION_REQUEST,
PROFILE_CREATE_EDUCATION_SUCCESS,
PROFILE_CREATE_EDUCATION_FAIL,
} from '../constants/profileConstants'
import { setAlert } from './alertActions'
export const getCurrentProfile = () => async (dispatch, getState) => {
try {
dispatch({ type: PROFILE_DETAILS_REQUEST })
const {
userLogin: { userData },
} = getState()
const config = {
headers: {
Authorization: `Bearer ${userData.token}`,
},
}
const { data } = await axios.get('/api/v1/profile/me', config)
dispatch({
type: PROFILE_DETAILS_SUCCESS,
payload: data,
})
} catch (error) {
dispatch({
type: PROFILE_DETAILS_FAIL,
payload:
error.response && error.response.data.error
? error.response.data.error
: null,
})
}
}
My reducer:
export const profileDetailsReducer = (state = { profile: {} }, action) => {
switch (action.type) {
case PROFILE_DETAILS_REQUEST:
return {
...state,
loading: true,
}
case PROFILE_DETAILS_SUCCESS:
return {
loading: false,
profile: action.payload,
}
case PROFILE_DETAILS_FAIL:
return {
loading: false,
error: action.payload,
}
case PROFILE_DETAILS_RESET:
return {
profile: {},
}
default:
return state
}
}
My dashboard component:
import React, { useEffect } from 'react'
import Moment from 'react-moment'
import { useDispatch, useSelector } from 'react-redux'
import { getCurrentProfile } from '../actions/profileActions'
import Loader from '../components/layout/Loader'
import DashboardActions from '../components/dashboard/DashboardActions'
const Dashboard = ({ history }) => {
const dispatch = useDispatch()
const profileDetails = useSelector((state) => state.profileDetails)
const { loading, error, profile } = profileDetails
const userLogin = useSelector((state) => state.userLogin)
const { userData } = userLogin
console.log(profile)
useEffect(() => {
if (!userData) {
history.push('/login')
} else {
dispatch(getCurrentProfile())
}
}, [dispatch, history, userData])
return (
<>
<h1 class='mb-4'>Dashboard</h1>
<p>Welcome {userData && userData.name}</p>
<br />
{loading ? (
<Loader />
) : (
<>
<DashboardActions />
<h2 className='my-2'>Education Details</h2>
<table className='table'>
<thead>
<tr>
<th>Level</th>
<th>Field of study</th>
<th>School</th>
</tr>
</thead>
<tbody>{profile.education.map((edu) => console.log(edu))}</tbody>
</table>
</>
)}
</>
)
}
export default Dashboard
Issue
state.profile.educatioin is undefined in your initial state.
export const profileDetailsReducer = (state = { profile: {} }, action) => { ...
Solution(s)
Define an initial state that contains an education array
const initialState = {
profile: {
education: [],
},
};
export const profileDetailsReducer = (state = initialState, action) => { ...
Or provide a fallback value from your selector
const { loading, error, profile: { education = [] } } = profileDetails;
...
<tbody>{education.map((edu) => console.log(edu))}</tbody>
Or provide the fallback in the render
<tbody>{(profile.education ?? []).map((edu) => console.log(edu))}</tbody>
When updating a single value in shared, how do I spread in the other existing values
interface StateInterface {
env: {
apiUrl: string;
};
display: {
modal: string;
};
shared: {
avatar: string;
email: string;
fullName: string;
loggedIn: boolean;
language: string;
warningMessage: string;
};
}
const InitialState: StateInterface = {
env: {
apiUrl: 'http://localhost:8888',
},
display: {
modal: '',
},
shared: {
avatar: '',
email: '',
fullName: 'John Doe',
language: 'en',
loggedIn: false,
warningMessage: '',
},
};
const Reducer = (state: StateInterface, action: any) => {
switch (action.type) {
case 'SET_AVATAR':
return {
...state,
shared: {avatar: action.value}, // <<-- Will the other items in shared get overwriten, if so how to spread them in?
};
...
return {
...state,
shared: {...state.shared, avatar: action.value}, // <<-- Will the other items in shared get overwriten, if so how to spread them in?
};
Hi I am using immutableJS and I would want to update multiple objects in my array if it has the same id from action.contacts
const initialState = fromJS({
list: [{
id: 1,
loading: false,
}, {
id: 2,
loading: false,
}, {
id: 3,
loading: false,
}]
});
action.contacts = [{
id: 1
}, {
id: 2
}]
I expected when I call state.get('list') it would equal to
list: [{
id: 1,
loading: true,
}, {
id: 2,
loading: true,
}, {
id: 3,
loading: false,
}]
what I have done so far is this:
case UNLOCK_CONTACTS:
const indexesOfRow = state.get('list').findIndex((listItem) => {
return action.contacts.map((contact)=> listItem.get('id') === contact.id)
})
return indexesOfRow.map((index)=> {
state.setIn(['list', index, 'loading'], true);
});
}));
but it's not working out for me, didn't update anything
I created a similar solution in a fiddle http://jsfiddle.net/xxryan1234/djj6u8xL/398/
You are missing the point of immutable.js. The objects are not mutable.
const initialState = Immutable.fromJS({
list: [{
id: 1,
loading: false
}, {
id: 2,
loading: false
}, {
id: 3,
loading: false
}],
});
const contacts = [{
id: 1
}, {
id: 3
}]
let newState = initialState.set( 'list', initialState.get('list').map( (row,index) => {
let contact = contacts.find((item)=>{
return item.id == row.get('id')
})
if (contact){
return row.set('loading', true)
}
return row;
}))
console.log(newState.toJS())
see in the updated fiddle http://jsfiddle.net/djj6u8xL/399/
const newState = initialState.update('list', (oldValue) =>
oldValue.map(item =>
action.contacts.find(act =>
act.get('id') === item.get('id')) !== undefined ?
item.update('loading',(oldVal)=> !oldVal) : item))
console.log(newState.toJS())
notice: you need to turn action.contacts into immutable list of immutable Maps.
case UNLOCK_CONTACTS:
return state.set('list', state.get('list').map((listItem) => {
const matched = _.find(action.contacts, (contact) => listItem.get('id') === contact.id);
if (matched) {
return fromJS({ ...listItem.toJS(), loading: true });
}
return listItem;
}));
So I manage to solve it by mapping the list and then finding if the listItem exists in action.contacts. If it matches I return the matched object with loading: true and if not I return the same object.
I am open to suggestions how can I refactor this solution though, I am quite new to immutable js and I feel there is much more simpler way to solve this but I don't know yet.