Why should the store in redux should be a constant variable?-CodePudding

I have seen a lot examples such as const store = createStore(someReducer) what's use of making it a constant when we want it to be changed through reducers? Why not var?

CodePudding user response：

The contents of the store will change, but you will never reassign it with another store, hence const.

Generally, nowadays it's usually best to use let and const, as these scope differently than var. var is not limited to block scope, so variables kind of overwrite each other in unexpected ways. Consider these two code snippets: (example from MDN)

var x = 1;

if (x === 1) {
  var x = 2; // just changes the value of the outer variable

  console.log(x);
  // expected output: 2
}

console.log(x);
// expected output: 2

if you use let (or const) instead, variables exist only in the scope they are created in - shadowing each other, but not overriding each other's values:


let x = 1;

if (x === 1) {
  let x = 2; // new variable with the same name for the inner block, shadows the outer variable

  console.log(x);
  // expected output: 2
}

console.log(x);
// expected output: 1

CodePudding user response：

The value of store should never change to point to a new store. The state of the store changes, but store always refers to just the one store that was created. You can see that in the createStore documentation's example:

import { createStore } from 'redux'

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

const store = createStore(todos, ['Use Redux'])

store.dispatch({
  type: 'ADD_TODO',
  text: 'Read the docs'
})

console.log(store.getState())
// [ 'Use Redux', 'Read the docs' ]

store never gets a new value there, but the state of the store it refers to changes. Notice the bit at the end getting the current state of the store.

Let's make that clearer by adding a call to getState before the dispatch:

// console.log(Object.keys(window).sort());
const { createStore } = RTK;

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

const store = createStore(todos, ['Use Redux'])

console.log("before dispatch:", JSON.stringify(store.getState()))
// before dispatch: ["Use Redux"]

store.dispatch({
  type: 'ADD_TODO',
  text: 'Read the docs'
})

console.log("after dispatch: ", JSON.stringify(store.getState()))
// after dispatch: ["Use Redux", "Read the docs"]

<script src="https://unpkg.com/@reduxjs/toolkit"></script>

The state of the store changes, not which store is being used, so store never changes.

CodePudding user response：

const does not create an immutable data structure, it just prevents that variable from being reassigned.

const numbers = [1,2,3]

// mutating the object assigned to `numbers` is fine
numbers.push(4);

// reassigning the variable is not
numbers = [1,2,3,4]

Generally, const is used where a variable will not be reassigned, and where block scoping is desirable. The redux store object is a great example of that.