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上的文档：

基本上，您希望将组件“连接”到redux存储，如下所示：

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'))

Redux提供了Dispatch功能，它将传播我们的动作，可以在按钮点击中调用它

您将通过

获得更新后的状态

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

Redux正确的位置/方法来存储状态值

2 个答案: