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;
    }
}

reducers的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

redux如何存储数据？

1 个答案: