redux如何存儲數據？

Question

我正在開發一個小應用程序，以了解有關如何使用redux的更多信息。 根據我對redux的理解，您可以在商店中存儲和更新數據。 在我的應用程序中，我有一個帶有兩個文本輸入的HTML表單，提交時使用動作創建者功能來處理提交。 然后，creator函數將數據分派給reducer函數，該函數應將數據存儲到redux存儲中。 當我console.log注銷存儲時，redux存儲中沒有存儲任何數據。 有人看到我的問題出在哪里嗎，或者我對redux的解釋是錯誤的？

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import reduxThunk from 'redux-thunk';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import rootReducer from './truth/reducers'

const store = createStore(rootReducer(), {}, applyMiddleware(reduxThunk));

console.log(store.getState());

ReactDOM.render(
    <Provider store={store}>
        <App /> 
    </Provider>,
    document.getElementById('root')
);

SimpleForm.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux'
import { Field, reduxForm } from 'redux-form';
import { fetchName }from '../truth/actions';

class SimpleForm extends Component {

    render() {
        const { handleSubmit, pristine, reset, submitting, fetchName} = this.props;
        return (
            <form onSubmit={handleSubmit(fetchName)}>
                <br />
                <Field name="fname" type="text" component="input" label="First Name" />
                <Field name="lname" type="text" component="input" label=" Last Name" />
                <div>
                    <button type="submit" disabled={submitting}> Submit </button>
                    <button type="button" disabled={pristine || submitting} onClick={reset}> Reset </button>
                </div>
            </form>
        );
    }
}

const myReduxForm = reduxForm({
    form: "mySimpleForm",
    onSubmit: fetchName,
    onSubmitSuccess:  (result, dispatch) => {
        console.log("I am in the onSubmitSuccess func");
        console.log('i am after dispatch');
    }
})


export default compose(
    connect(null, {fetchName} ),
    myReduxForm
    )(SimpleForm);

操作的index.js文件

import { WHOLE_NAME, MY_LIKES} from './types';
import axios from 'axios';

export const fetchName = (values) =>  async dispatch => {
    //const res = axios.post();
    console.log("I am in fetchName");
    console.log(values);

   dispatch({type: WHOLE_NAME, payload: values});
}

nameReducer.js

import { WHOLE_NAME } from '../actions/types';

const name = {
    fname: "",
    lname: ""
}

export const setNames = (state = name, action) => {
    console.log("I am in setnNames")
    console.log(action.payload);
    let myPayload = {...action.payload};
    console.log(myPayload.fname);  //logs out correctly
    switch (action.type) {
        case WHOLE_NAME:
            return { ...state, fname: myPayload.fname, lname: myPayload.lname }
        default:
            return state;
    }
}

減速器的index.js文件

import { combineReducers } from 'redux';
import { setNames } from './nameReducer';
import { reducer as reduxFormReducer } from 'redux-form';

const rootReducer = () => combineReducers({
    setNames,
    form: reduxFormReducer
});

export default rootReducer;

Answer 1

const store = createStore(rootReducer(), {}, applyMiddleware(reduxThunk));

console.log(store.getState()); //this is called only once before you even render anything 

您可以使用redux devtools來查看商店在任何特定時刻的外觀。 https://github.com/zalmoxisus/redux-devtools-extension