CODEWITHSUNDEEP
javascriptreactjsreduxactionreducers
legend12
legend12

Reputation: 375

How does redux store data?

I'm working on a little app to learn more about how to use redux. From my interpretations of what is written about redux, you can store and update data on the store. In my app, I have a HTML form with two text inputs that when submitted uses an action creator function to handle submission. The creator function then dispatches the data to a reducer function, which is suppose to store the data into the redux store. When I console.log out the store, there is no data stored in the redux store. Does anyone see where my problem lies or if my interpretation of what redux is suppose to do is wrong?

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

actions' index.js file

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 file

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

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

export default rootReducer;

Upvotes: 2

Views: 5595

Answers (1)

h-des
h-des

Reputation: 865

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

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

You can use redux devtools to see what does the store looks like in any particular moment. https://github.com/zalmoxisus/redux-devtools-extension

Upvotes: 4

Related Questions