Store not updated in redux?

Asked
Active3 hr before
Viewed126 times

9 Answers

reduxstore
90%

How to answer "have you ever been refused a visa, denied entry or ordered to leave Canada or any other country?" ,Connect and share knowledge within a single location that is structured and easy to search., Is it a correct to use passive voice in the following sentence?

Second, you need to pass Redux's mapDispatchToProps() function to your connect, with the actual action passed in.

  const mapDispatchToProps = (dispatch) => {
     return {
        onTodoClick: (id) => {
           dispatch(toggleTodo(id))
        }
     }
  }

  export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
88%

You have written Action creators and reducers. You have connected the store to the component, passing in props properly. And you call the action from the component.,When an action has been dispatched, Redux checks if the state has changed or not. If it has not changed then it doesn’t have to update the components.,If you mutate the data then the reference will be the same - even though the data is changed - and Redux will not see that the state has changed. When Redux cannot see that the state has changed, it will not update the React components with new data from the state.

const a = {};

const b = a;
load more v
72%

Sometimes, you are trying to dispatch an action, but your view does not update. Why does this happen? There may be several reasons for this.,You can then pass dispatch down to other components manually, if you want to.,If you're somewhere deep in the component hierarchy, it is cumbersome to pass the store down manually. This is why react-redux lets you use a connect higher-order component that will, apart from subscribing you to a Redux store, inject dispatch into your component's props.

function todos(state = [], action) {
   switch (action.type) {
      case 'ADD_TODO': // Wrong! This mutates state      state.push({        text: action.text,        completed: false      })      return state    case 'COMPLETE_TODO':      // Wrong! This mutates state[action.index].      state[action.index].completed = true      return state    default:      return state  }}
load more v
65%

I like this because it's self-descriptive, but to be clear, you do not have to follow this convention. The Redux documentation on actions, for example, does not. It contains this example:,In Redux "actions" are like news reports. They tell whoever may care that something has happened.,Speaking of the code that uses the action to update our application state, in Redux terminology this part is called a "reducer."

{
   type: 'FETCH_USERS_STARTED'
}
load more v
75%

The component state changed,Your component `App` right now neither update the store or receive different props. ,The component props have changed

I can get it to console log the value as it changes, but it doesn't output it on the screen. Can anyone tell me what I'm doing wrong

import React, { Component } from 'react';
import { createStore } from 'redux';


const counter = (state = 0, action) => {
  switch(action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state -1;
    default:
      return state;
  }
}
const store = createStore(counter);
store.subscribe(()=>{
  console.log(store.getState());
});
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Counter Application</h1>
        <hr/>

        <Counter 
          value={store.getState()}
          onIncrement={() => store.dispatch({type: 'INCREMENT'})} 
          onDecrement={() => store.dispatch({type: 'DECREMENT'})} 
        />
      </div>
    );
  }
}


const Counter = ({
  value, 
  onIncrement,
  onDecrement
}) => {
  return(
    <div>
      <h1>{value}</h1>
      <button onClick={onIncrement}> Plus </button>
      <button onClick={onDecrement}> Minus </button>
    </div>
  )
}


export default App;
load more v
40%

Thus, using the connect() function as shown, dispatch() is passed as a prop to its child components from where the necessary action is dispatched.,Actions hold or store information that needs to be passed to the Redux store, and this information is grabbed from the component where the action is dispatched. This means that while your store may hold information pertaining to a number of components, it can be considered an independent module in your system. Your components need not know what state they're updating—their prime concern should be dispatching the necessary action. The remaining computation is handled by the reducer and the store itself. ,Consider the following code where you have a store and and a reducer that dispatches a default action of type ADD_USER. Here, the store directly uses the store.dispatch() method to dispatch an action.

1
import {
   createStore
} from 'redux'
2
const store = createStore(users, null)
3
4
const addUser = (user) => {
   5
   return {
      6 type: 'ADD_USER',
      7 user: user
      8
   }
   9
}
10
11 store.dispatch(addUser(user))
load more v
22%

Once we define our action we pass it to the dispatcher. store.dispatch() is a function provided by the library which accepts an action to perform an action against the state. Redux restricts updating the state to this method only.,We now have a store, a state, and an action in our app to perform some tasks against the state. Now we need a way to use these actions to actually do the update. This can be done by using a pure function and this is rule #3.,dispatch(action) — The only way to update a state is by dispatching an action and dispatch(action) serves the purpose. We will talk more in detail in a bit.

An action is a plain JavaScript object to keep track of the specific event taking place in the application. What makes it special is a ‘type’ property which is a necessary part of it.

{
   type: "ADD_BOOK_TO_THE_CART"
}
60%

Reducer will update the state depending on the action that was dispatched.,Reducer will pass the updated state to the store.,Subsequently, we need a component that will be able to display the reminders we have added to our redux store. Enter the <ReminderContainer />

I will be using the same react application I have used in my previous two blogs, but I added three additional components in order to provide a better understanding of how adding and removing items works. Disclaimer: this blog is written with notion that you have fundamental understanding of React and Javascript.

Reminder.jsReminderContainer.jsReminderCreator.js
48%

Please note that this library is designed to test the action-related logic, not the reducer-related one. In other words, it does not update the Redux store. If you want a complex test combining actions and reducers together, take a look at other libraries (e.g., redux-actions-assertions). Refer to issue #71 for more details.,Returns an instance of the configured mock store. If you want to reset your store after every test, you should call this function.,Returns the state of the mock store.

npm install redux - mock - store--save - dev
load more v

Other "redux-store" queries related to "Store not updated in redux?"