В Redux, где действительно сохраняется состояние?

Ответ 1

Состояние в Redux хранится в памяти, в хранилище Redux.

Это означает, что если вы обновите страницу, это состояние исчезнет.

Вы можете представить, что магазин выглядит примерно так:

function createStore(reducer, initialState) {
  let state = initialState // <-- state is just stored in a variable that lives in memory

  function getState() {
    return state
  }

  function dispatch(action) {

    state = reducer(state, action) // <-- state gets updated using the returned value from the reducer

    return action
  }

  return {
    getState,
    dispatch
  }
}

Состояние в redux - это просто переменная, которая сохраняется в памяти, потому что на нее ссылаются (через замыкание) все функции приведения.

Вот упрощенный пример того, что происходит:

function example() {
  let variableAvailableViaClosure = 0
  
  function incrementTheClosureVariable() {
    variableAvailableViaClosure += 1
  }

  function getTheClosureVariable() {
    return variableAvailableViaClosure
  }

  return {
    incrementTheClosureVariable,
    getTheClosureVariable
  }
}

let data = example()

// at this point example is finished
// but the functions it returned
// still have access to the (internal) variable via closure

console.log(
  data.getTheClosureVariable() // 0
)

data.incrementTheClosureVariable()

console.log(
  data.getTheClosureVariable() // 1
)

Ответ 2

Государства хранятся в магазине redux. Redux Store - это глобальный магазин, к которому можно получить доступ в любом месте и в любых компонентах.

Рассмотрим пример получения индекса данных с использованием стороннего API. Следующий фрагмент использует componentWillMount который инициирует вызов выборки с помощью действия redux.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchDataFromUrl } from '../actions/index.js';


class Indexdata extends Component {


  constructor(props){
    super(props);
    this.state = {
      text: ''
    }
  }


  componentWillMount(){
    let thisVal = this;
      thisVal.props.fetchIndexofData()
  }

  componentWillReceiveProps(nextProps){
    this.setstate({
      text: nextProps.indexData.text
    })
  }

  render(){
    return(
      <div>
        <Navbar />
        <h2 className="prescription-index-title">Index of Data</h2>
      </div>
    )
  }
}

function mapStateToProps(state){
  return{
    indexData: state.fetchedData
  }
}

function mapDisptachToProps(dispatch){
  return {
    fetchIndexofData: () => dispatch(fetchDataFromUrl(access_token))
  };
};

export default connect(mapStateToProps, mapDisptachToProps)(IndexData);

Вышеприведенный фрагмент будет извлекать индекс данных с помощью действия redux. Ниже приведен код сокращения,

export function fetchDataFromUrl(){
  return(dispatch) => {
    const base_url = "https://api_serving_url.com"
    fetch(base_url, {
      method: 'GET'
    })
    .then(response => response.json())
    .then(data => {
      dispatch({
        type: "INDEX_DATA",
        data: data
      })
    })
  }
}

Действие Redux отправит данные в редуктор, где состояние будет инициализировано в магазине redux. Следующий фрагмент кода является редукционным редуктором

export function fetchedData(state = [], action) {
  switch(action.type) {
    case "INDEX_DATA":
      return action.data;
    default:
      return state; 
  }
}

Состояние, сохраненное в магазине mapStateToProps, будет отображаться с использованием функции mapStateToProps, реализованной в вышеуказанном компоненте. Теперь вы можете получить доступ к состоянию, используя реквизиты в соответствующем компоненте. componentWillReceiveProps LifecyclehookWillReceiveProps сможет извлекать хранилище с сохраненными состояниями.

Вы можете получить доступ к Государству посредством использования store.getState() в любом компоненте. Единственным недостатком использования состояния редуктора является то, что он перезапустит состояние при обновлении компонента/приложения. Пройдите через магазин Reducer Store для получения дополнительной информации.