I know there are a lot of similar questions, but I was unable to find the right answer sifting through the others. The issue seems to be that {loopToDo} does not directly reference a prop from the store. How can I set my code up so that it updates when the store changes, like I want it to?
#connect((germzFirstStore) => {
return {
taskList: germzFirstStore.tasks
}
})
class TaskBoard extends React.Component {
render() {
function toDoStatus(value) {
return value.taskstatus === "toDo";
}
var toDoTasks = this.props.taskList.tasks.filter(toDoStatus);
var loopToDo = toDoTasks.map((tasksEntered) => {
return (
<div id={tasksEntered.idtasks} className="taskBox">{tasksEntered.task}</div>
);
});
return(
<div ref="toDo" id="toDo" className="container toDo">{loopToDo}</div>
)
}
}
the reducer:
const tasksReducer = (state=tasksInitialState, action) => {
if (action.type === "ADD") {
state = {...state, tasks: [...state.tasks, action.newTask]}
}
return state; }
The problem here is that by doing this
state = {...state, tasks: [...state.tasks, action.newTask]}
You are effectively mutating the state before returning it and that probably is the reason why your components are not re-rendering on updating state.
What you can do in your reducer is
if (action.type === "ADD") {
return {...state, tasks: [...state.tasks, action.newTask]}
}
or
if (action.type === "ADD") {
return Object.assign({}, state, {tasks: [...state.tasks, action.newTask]})
}
Hope it helps :)
If germzFirstStore.tasks has updated then the component will re-render it has nothing to do with what is inside the render function. My guess is that you are mutating the state in your reducer instead of updating it and returning the updated version of the state.
Related
Say had a reducer for a certain state
... function thisFunction (
state = new state,
action
)
{
switch(type) {
case INIT_STATE:
return {
...state,
...action.state
}
default:
return {
certainProp: setCertainProp(state.certainProp, action)
}
and my reducer for it
function setCertainProp(state = {}, action) {
const { type } = action
switch (type) {
case SET_CERTAIN_PROP:
return action.certainProp
default:
return state
and now my action
function setCertainPropAction(prop){
return {
type: SET_CERTAIN_PROP
action: prop
}
}
now inside my container in a componentDidMount or useEffect I want certainProp's value to
come from a fetch call
useEffect(() => {
fetchCertainProp().then(response => setCertainPropAction(response)
}, [])
my question is, is it possible to completely remove the useEffect here and call the fetchCertainProp() from inside the initialization of certainProp within the reducer?
I have access to redux-thunks but I haven't seen an example of how this would be possible. I don't want to add an unnecessary useEffect if I don't need too.
So I have this sidebar component where I load my store and my dispatcher
//select
const mapStateToProps = state => {
return { renderedEl: state.renderedEl }
}
function mapDispatchToProps(dispatch) {
return{
renderLayoutElement: element => dispatch(renderLayoutElement(element))
}
}
Then inside the same component this Is how I trigger the dispatcher
renderEl = (el) => {
var elementName = el.target.getAttribute('id');
var renderedElements = this.props.renderedEl; //this is data from the store
for (let key in renderedElements) {
if (key == elementName) {
renderedElements[key] = true
}
}
this.props.renderLayoutElement({renderedElements});
}
Then as I understand it gets sent to the reducer
import {RENDER_LAYOUT_ELEMENT} from "../constants/action-types"
const initialState = {
renderedEl: {
heimdall: false,
skadi: false,
mercator: false
}
}
function rootReducer(state = initialState, action){
if(action.type === RENDER_LAYOUT_ELEMENT){
return Object.assign({},state,{
renderedEl: state.renderedEl.concat(action.payload)
})
}
return state
}
export default rootReducer;
This is its action
import {RENDER_LAYOUT_ELEMENT} from "../constants/action-types"
export function renderLayoutElement(payload) {
return { type: RENDER_LAYOUT_ELEMENT, payload }
};
Now the thing is. Im receiving a
state.renderedEl.concat is not a function at rootreducer / at dispatch
I dont understand why does that happen.
Becuase, actually the store gets updated as I can see, but the console returns that error. And I have to reload the render that uses the props of that store (with an onhover) in order to be able to see the changes. It doesnt happen automatically as it would happen with a state
if(action.type === RENDER_LAYOUT_ELEMENT){
return { ...state, renderedEl: { ...state.renderedEl, ...action.payload } };
}
Duplicate from comments maybe it can be helpful to someone else :)
In optimizing my component for performance, I noticed that sequential shouldComponentUpdate calls were seemingly missing the prop change from my redux store. An example being:
In props:
uiBehavior: {
shouldShow: false,
}
Redux Action:
fireActionToShow()
Redux Reducer:
case ActionType.UPDATE_UI_BEHAVIOR: return {...state, shouldShow: true}
Then I'm seeing:
shouldComponentUpdate(nextProps) {
// Would expect to at some point see:
this.props.shouldShow === false
nextProps === true
// Instead, only seeing
this.props.shouldShow === false
nextProps === false
// then
this.props.shouldShow === true
nextProps === true
}
** Note that this clearly isn't the code, just an example
It seems to me that a prop change isn't causing a rerender attempt, or am I missing something?
Thanks.
Expanding for clarity, here is some of the real code:
*** the event in the Action updates the uiBehavior prop on the redux store.
componentDidUpdate(prevProps, prevState) {
const { uiBehavior } = this.props;
if (!_.isEqual(uiBehavior.lockAttributes, prevProps.uiBehavior.lockAttributes)) {
console.log('Lock has changed.'); // This never gets called
}
}
const mapStateToProps = function(state){
return {
uiBehavior: state.uiBehavior,
}
}
export default connect(mapStateToProps, mapDispatchToProps)(SlotMachine)
*** UPDATE
JS Call:
this.props.setGeneralUiKeyValue('lockAttributesInCart', !lockAttributes);
Action:
export const setGeneralUiKeyValue = (key, value) => { return { type: GENERAL_UI_UPDATE, key, value }}
Reducer:
export const uiBehavior = (state = {}, action) => {
let newUiState = {...defaultState, ...state}
switch (action.type) {
case uiActionTypes.GENERAL_UI_UPDATE:
newUiState.general = newUiState.general || {};
newUiState.general[action.key] = action.value;
return newUiState
default:
return newUiState;
}
return newUiState
Background
I am working on my first project using Redux. I am trying to sort data in a reducer. The reducer has 2 sort methods. One for sorting data based on the timeStamp and one by the VoteScore.
Problem
The reducer fires off, I can console.log() the data and see it is being passed to the correct case when sort is fired off, but the data does not sort on the screen.
**
I can see when I console.log the data that the data is sorting. So it
is just not rerendering.
**
Example of Data
(2) [{…}, {…}]
{timestamp: 1468479767190, voteScore: -5, …}
{timestamp: 1467166872634, voteScore: 6, …}
Example Reducer
function posts(state = [], action) {
switch(action.type) {
case 'SORT_POSTS': {
switch (action.attribute) {
case 'BY_TIMESTAMP':
return state.sort(function(a, b) {
return a.timestamp - b.timestamp;
});
case 'BY_VOTESCORE':
return state.sort(function(a, b) {
return a.voteScore - b.voteScore;
});
default:
return state;
}
}
case SET_POSTS:
return action.posts;
default:
return state;
}
}
Example Dispatch & onClick Method
<button onClick={() => this.props.boundSortPosts(this.state.timeStamp)}>Click MeK</button>
const mapDispatchToProps = (dispatch) => ({
boundSortPosts: (attribute) => dispatch(sortPosts(attribute))
});
Example Action
export function setPosts(posts) {
return {
type: SET_POSTS,
posts,
}
}
export function sortPosts(attribute) {
return {
type: SORT_POSTS,
attribute,
}
}
Initially Rendering Data Like This
render() {
return (
<div>
<Posts />
<div><button onClick={() => this.props.boundSortPosts(this.state.timeStamp)}>Sort by Time Stamp</button></div>
<div><button onClick={() => this.props.boundSortPosts(this.state.voteScore)}>Sort by Vote Score</button></div>
{
this.props.posts.map((post, index) => {
return (
<div key={index}>
<h4>{post.timestamp}</h4>
<h4>{post.voteScore}</h4>
</div>
)
})
}
</div>
)
}
Question
What must I do to cause a rerender at this point?
First and very important thing is you should not mutate your state. The sort() method sorts the elements of an array in place and returns the array.You can create a copy of the state array by calling state.slice() before sorting in your reducer, something like this :
return state.slice().sort(function(a, b) {
return a.timestamp - b.timestamp;
});
Regarding your component not re-rendered, please check your mapStateToProps. It should be something like this:
function mapStateToProps(state} {
return {
posts: state.posts // posts is reducer which is passed to your store.
}
}
I am trying to simply sort on the redux store data in mapStateToProps, similar to how it is being done in Dan Abramov's Egghead.io video: https://egghead.io/lessons/javascript-redux-colocating-selectors-with-reducers
My problem is, initially the state is returning undefined (as it is fetched asynchronously), so what would be the best way to deal with this? Current code is as follows (_ is the ramda library):
const diff = (a, b) => {
if (a.name < b.name) {
return -1
}
if (a.name > b.name) {
return 1
}
return 0
}
const mapStateToProps = (state) => {
return {
transactions: _.sort(diff, state.transactions.all),
expenditure: state.expenditure.all,
income: state.income.all
}
}
I thought that transactions.all should initially be an empty array (which would mean the code would work) because of the initial state set in the reducer:
const INITIAL_STATE = { transactions: { all: [] }, transaction: null }
export default function (state = INITIAL_STATE, action) {
switch (action.type) {
case FETCH_TRANSACTION:
return { ...state, transaction: action.payload.data }
case FETCH_TRANSACTIONS:
return { ...state, all: action.payload.data }
case EDIT_TRANSACTION:
return { data: action.data }
case ADD_TRANSACTION:
return { data: action.data }
case DELETE_TRANSACTION:
return { ...state }
default:
return state
}
}
Thanks in advance.
As you said, it is fetched asynchronously. Perhaps when the component rendered, data isn't ready yet which resulted to an undefined object.
const SampleComponent = (props) => {
if(props.transaction === undefined)
return <Spinner /> // Loading state
else
// your implementation
}
You can further make the code cleaner as explained by Dan himself in the docs here: http://redux.js.org/docs/advanced/AsyncActions.html
Managed to solve this, because in combine reducers, I had set transactions with the name transactions and then in the reducer, I essentially had the initial state set to transactions: { all: [] } }.
This was causing state.transactions.all to be undefined, as the correct state structure was actually state.transactions.transactions.all.
After updating the transactions reducer to:
const INITIAL_STATE = { all: [], transaction: null }
export default function (state = INITIAL_STATE, action) {
switch (action.type) {...
The initial empty transactions array prior to the promise returning meant the sort no longer causes an error, and is then correctly sorted on load.