Я немного искал этот вопрос, но нашел очень расплывчатые ответы. В redux мы знаем, что состояние хранится как объект. Но где это государство хранится на самом деле? Это как-то сохранено как файл, доступ к которому мы можем получить позже? Я знаю, что он не хранит его в формате cookie или в локальном хранилище браузера.
В 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 для получения дополнительной информации.