Redux proper location/method 来存储状态值

Question

目前我正在使用 action 来传递数据值，因此...

<button onClick={() => this.props.getSource("hello")}>Check</button>

我正在将 hello 传递给以下操作...

export const getSource = (string) => {
    return {
        type: "SOURCE_RECEIVED",
        payload: string
    }
}

我的应用程序中也有一个动作侦听器，用于侦听此动作...

export default function (state=null, action) {
    switch(action.type) {
        case "SOURCE_RECEIVED":
            return action.payload;
            break;
    }
    return state;
}

我也在结合动作监听器...

import String from './reducer-listener';

const allReducers = combineReducers({
    source: String
});

要创建商店，我使用以下代码...

import allReducers from './reducers';

const store = createStore(allReducers);

const app = document.getElementById('app');
ReactDOM.render(
    <Provider store={store}>
        <Layout/>
    </Provider>
    , app);

我的问题是，我想在应用程序的当前状态下保存字符串 hello，以便以后可以检索或更新它。现在我所做的就是获取字符串并将其打印到控制台。我不知道使用 redux 存储状态值的正确方法是什么。

如何更新我的代码，以便将 hello 字符串保存在以后可以检索的位置？

Answer 1

在此处查看 mapStateToProps 上的文档：

基本上你想 "connect" 你的组件到 redux store 是这样的：

import { connect } from 'react-redux'

const mapStateToProps = (state, ownProps) => {
  return {
    source: state.source
  }
}

const TheConnectedComponent = connect(
  mapStateToProps
)(TheComponent);

Answer 2

像下面这样创建一个减速器

 var userReducer = function (state = {}, action) {   
     switch (action.type) {
            case 'SET_NAME':
                return {
                    ...state,
                    name: action.name
                }
            default:
                return state;
      }
}

您可以使用以下代码创建商店

import { createStore } from 'redux'
let store = createStore(userReducer)

此时您可以通过

测试状态

console.log('store state after initialization:', store.getState())

像这样创建动作创建器

var setNameActionCreator = function (name) {
    return {
        type: 'SET_NAME',
        name: name
    }
}

您可以通过像下面这样调度动作创建者来将任何值存储到商店

store.dispatch(setNameActionCreator('bob'))

Dispatch 函数由 Redux 提供，将传播我们的操作，可以在您单击按钮时调用它

您将在

之前获得更新的状态

console.log('store state after action SET_NAME:', store.getState())

Redux proper location/method 来存储状态值

Redux proper location/method to store state value

reactjs

redux

react-redux