Как редукс хранит данные? - PullRequest
Новая
       84

Как редукс хранит данные?

0 голосов
/ 10 декабря 2018

Я работаю над небольшим приложением, чтобы узнать больше о том, как использовать Redux.Исходя из моей интерпретации того, что написано о редуксе, вы можете хранить и обновлять данные в магазине.В моем приложении есть HTML-форма с двумя текстовыми вводами, которая при отправке использует функцию создателя действий для обработки отправки.Затем функция создателя отправляет данные в функцию-редуктор, которая, как предполагается, сохраняет данные в хранилище-редукторе.Когда я сохраняю консоль в логе, в хранилище редуксов нет данных.Кто-нибудь видит, в чем заключается моя проблема, или моя интерпретация того, что должен делать редукс, неверна?

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);
* 1008файл * actions '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;

1 Ответ

0 голосов
/ 10 декабря 2018 
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

...