We Keep Coding

Updating states from input field when using React-Redux

I am currently using React-Redux but for a pretty simple app.
The app just simply takes a user ID, password, and an address of a server that the user wants to get into. It gets into the server and runs a script in the server. But the functionality of the app is not important in my question.
I only need 3 states (username, password, and server_address) for the app.
However, I have three different reducers and actions that do the same thing just with the different state.
For example,
userReducer.js
// reducer functions takes a default state and an action to apply
import { UPDATE_USER } from '../actions/userActions'
export default function userReducer(state = '', { type, payload }) {
switch (type) {
case UPDATE_USER:
return payload;
default:
return state;
}
}
passwordReducer.js
// reducer functions takes a default state and an action to apply
import { UPDATE_PASSWORD } from '../actions/passwordActions'
export default function passwordReducer(state = '', { type, payload }) {
switch (type) {
case UPDATE_PASSWORD:
return payload;
default:
return state;
}
}
routerReducer.js // this is the server
// reducer functions takes a default state and an action to apply
import { UPDATE_ROUTER } from '../actions/routerActions'
export default function routerReducer(state = '', { type, payload }) {
switch (type) {
case UPDATE_ROUTER:
return payload;
default:
return state;
}
}
and actions that look like this:
export const UPDATE_PASSWORD = 'updatePassword'
export function updatePassword(newPassword) {
return {
type: UPDATE_PASSWORD,
payload: {
'newPassword': newPassword
}
}
}
It's same for the other two with the different variable.
Then in my component, I just connected mapActionsToProps to the component and put 3 functions that does the same thing (updating the state)
class Container extends React.Component {
constructor(props) {
super(props)
}
onUpdateUser = (e) => {
this.props.onUpdateUser(e.target.value)
}
onUpdatePassword = (e) => {
this.props.onUpdatePassword(e.target.value)
}
onUpdateRouter = (e) => {
this.props.onUpdateRouter(e.target.value)
}
...
using it like
This kinda works, but I am not sure if this is the right way to use React-Redux. First of all, they are duplicates and do not seem like a good practice. However, I can't think of a way to update each state in a React-Redux way without just putting similar codes.
Any help?

You could pass the event to your action.js
export const onInputChange = event => ({
type: 'UPDATE_INPUT',
payload: event
});
And simply grab the name and the value of the event in your reducer.js
const INITIAL_STATE = {
user: '',
password: ''
}
export const inputReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case: 'UPDATE_INPUT':
return { ...state, [action.payload.target.name]: action.payload.target.value };
default:
return state;
};
};
Then in your component
// ...
handleChange(event) {
this.props.onInputChange(event);
};
// ...
<input type='text' name='user' onChange={this.handleChange} />

You can use a single function just to send the key/value pairs you want to update.
export const UPDATE_USER_VALUE = 'updateUserValues'
export function updateUser(payload) {
return {
type: UPDATE_USER_VALUE,
payload: payload,
}
}
You must call that function like this:
onUpdateUser = (e) => {
this.props.onUpdateUser({
key: 'name',
value: e.target.value
})
}
onUpdatePassword = (e) => {
this.props.onUpdateUser({
key: 'password',
value: e.target.value
})
}
Then just update the values.
import { UPDATE_USER_VALUE } from '../actions/userActions'
const defaultState = {
username = '',
password = '',
server_address = ''
};
export default function passwordReducer(state = defaultState, { type, payload }) {
switch (type) {
case UPDATE_USER_VALUE:
return {
...state,
state[payload.key]: payload.value
};
default:
return state;
}
}

React Redux API call, data not making it back to component

In the last couple of days I have been working on my Redux api call. I am actually having a problem getting the data back to the view component. Currently I'm able to see the data in the in the action generator, so I know at least I'm able to get it. However, nothing is showing in the view. I imagine it may have something to do with when it's loading. This is why I tried to load it when the component is rendering.
https://djangoandreact.herokuapp.com/user/1 is what is not loading.
codesandbox: https://codesandbox.io/s/zlor60q3jm?from-embed
Should be able to go to /user/1 at the end similar to going to /1 brings up an article(Tough Hope)
Heres the view component:
import React from "react";
import { connect } from "react-redux";
import { fetchUser } from "../store/actions/userActions";
class UserDetailView extends React.Component {
componentDidMount() {
const userID = this.props.match.params.userID;
fetchUser(userID); //fixed
}
render() {
const { user } = this.props.user;
console.log(user);
return (
<div>
<h3>{user.username}</h3>
</div>
);
}
}
const mapStateToProps = state => ({
user: state.user
});
const mapDispatchToProps = (dispatch, ownProps) => ({
fetchUser: dispatch(fetchUser(ownProps.match.params.userID))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(UserDetailView);
Action generator
import axios from "axios";
import { thunk } from "react-redux";
export function fetchUser(userID) {
console.log(userID);
return dispatch => {
return axios.get(`/api/user/${userID}`).then(res => {
dispatch(fetchUserSuccess(res.data));
console.log(res.data); // loads data
});
};
}
// Handle HTTP errors since fetch won't.
function handleErrors(response) {
if (!response.ok) {
throw Error(response.statusText);
}
return response;
}
export const FETCH_USER_BEGIN = "FETCH_USER_BEGIN";
export const FETCH_USER_SUCCESS = "FETCH_USER_SUCCESS";
export const FETCH_USER_FAILURE = "FETCH_USER_FAILURE";
export const fetchUserBegin = () => ({
type: FETCH_USER_BEGIN
});
export const fetchUserSuccess = user => ({
type: FETCH_USER_SUCCESS,
payload: { user }
});
export const fetchUserFailure = error => ({
type: FETCH_USER_FAILURE,
payload: { error }
});
Reducers(which are probably fine):
import {
FETCH_USER_BEGIN,
FETCH_USER_SUCCESS,
FETCH_USER_FAILURE
} from "../actions/actionTypes";
const initialState = {
user: {},
loading: false,
error: null
};
export default function userReducer(state = initialState, action) {
switch (action.type) {
case FETCH_USER_BEGIN:
return {
...state,
loading: true,
error: null
};
case FETCH_USER_SUCCESS:
return {
...state,
loading: false,
user: action.payload.user
};
case FETCH_USER_FAILURE:
return {
...state,
loading: false,
error: action.payload.error,
user: {}
};
default:
return state;
}
}

folks. I found it.
case FETCH_USER_SUCCESS:
return {
...state,
loading: false,
user: action.payload.user
};
user is supposed to be user:action.payload
Also, the user action was supposed to be
export const fetchUserSuccess = user => ({
type: FETCH_USER_SUCCESS,
payload: user
})
WOOOOW. But, honestly, I learned so much about Redux in the last two sleepless nights, it was worth the pain. Really was. Now, instead of copy pasta, I know what an action generator is and does, and reducer (obvi)

React/Redux how to pass argument to modify API

I have been using Redux for the past two days, i'm getting to understand it more, however I encountered a problem which has stopped my progress.
I have an API which has interchangeable parameters.
e.g. api.example.com/data/{date}/.. and api.example.com/more-data/{regId}/..
My <Picker /> selects a value and that value should be passed to the URL, which calls the API and gives the selected data; in my case regionId.
The problem is changing the params without causing errors or getting CORS problem with the Api call. I also want to be able to set the regionId to have an initialState, so I can begin the request with a parameter in the url.
ReqService.js (just for async api calling)
class ReqService {
async getRequest(url) {
try {
let response = await (await fetch(url));
let responseJson = await response.json();
return responseJson;
} catch (error) {
console.error('Error: ', error);
}
}
}
export default new ReqService()
actions.js
import ReqService from '../ReqService';
export const IS_FETCHING = 'IS_FETCHING';
export const DATA_FETCHED = 'DATA_FETCHED';
export const ERROR_FETCHING_DATA = 'ERROR_FETCHING_DATA';
const BASE_URL = 'https://api.example.com/';
const DATE_TODAY = new Date().toISOString();
export const getTheData = (regionId) => {
// The regionId is the param i want to pass to the url
const url = `${BASE_URL}/${DATE_TODAY}/${regionId}`;
const request = ReqService.getRequest(url);
return dispatch => {
dispatch({ type: IS_FETCHING });
request
.then((data ) => {
dispatch({ type: DATA_FETCHED, payload: data });
})
.catch(error => {
dispatch({ type: ERROR_FETCHING_DATA, payload: error });
});
};
};
reducer.js
import { IS_FETCHING, DATA_FETCHED, ERROR_FETCHING_DATA } from '../Actions/actions';
const initialState = {
data: [],
fetching: false,
fetched: false,
error: null
};
export const myReducer = (state = initialState, action) => {
console.log(action);
switch (action.type) {
case IS_FETCHING:
return { ...state, fetching: true };
case DATA_FETCHED:
console.log('The Data Fetched ', action.payload);
return {
...state,
fetched: true,
fetching: false,
data: action.payload.data
};
case ERROR_FETCHING_DATA:
return { ...state, fetching: false, error: action.payload.error };
default:
return state;
}
};
The component where the param changes here:
import React, { Component } from 'react'
import {View, Text, Picker} from 'react-native'
import { connect } from '../../node_modules/react-redux';
import { getTheData } from './Actions/actions';
import { bindActionCreators } from "redux";
class FrontPage extends Component {
constructor(props){
super(props);
this.state = {
regionId:0
};
}
changeRegion = (regId) => {
this.props.getTheData(regId);
}
componentDidMount() {}
render() {
return (
<View>
<Text>Front Page</Text>
<Picker selectedValue={this.props.regionId}
onValueChange={itemValue => this.changeRegion(itemValue)}>
<Picker.Item label="One" value='1' />
<Picker.Item label="Two" value='2' />
</Picker>
</View>
)
}
}
const mapStateToProps = state => {
return {
data: state.data,
fetching: state.fetching,
error: state.error
};
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ getTheData }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(FrontPage);
I dont know if I am doing this correct, I looked at different examples and implemented what seems right. Any help will be great.

From what you are sharing it looks like a good implementation of React and Redux.
If you'd like the Picker component initially have a selected value, then set your state to what it should be. In your case, set the state regionId in your FrontPage component.
this.state = {
regionId: 1 // this will pre-select the first value.
};
"The problem is changing the params without causing errors or getting CORS problem with the Api call."
I'm unsure which problems you have when the params are changed. Can you elaborate or include a screenshot?
As for the CORS error message. Have a look at the article How to fix CORS problems to gain a better understanding of it and what you need to change. When getting this error the problem isn’t in the client application but in the server application. To fix it, you need to enable CORS support at the server level.
You can do this by setting the Access-Control-Allow-Origin header. e.g.
Access-Control-Allow-Origin: *
This will allow any host to access the API, even when they are on a different domain or post.

Using [Redux connect] in [https://jscomplete.com/repl/]

I am trying to run the code from the tutorial in
https://codepen.io/stowball/post/a-dummy-s-guide-to-redux-and-thunk-in-react#understanding-redux-4
on
https://jscomplete.com/repl/
, but the execution is failing with the following error:
ReferenceError: connect is not defined
I tried using an import statement at top of the file :
import { connect } from 'react-redux';
But it did not help resolve the error.
Is there something wrong in my understanding of the way jscomplete works?Any explanation would help
TIA
Update : Pasting the code as requested :
import { connect } from 'react-redux';
class ItemList extends React.Component {
componentDidMount() {
this.props.fetchData('https://5826ed963900d612000138bd.mockapi.io/items');
}
render() {
if (this.props.hasErrored) {
return <p>Sorry! There was an error loading the items</p>;
}
if (this.props.isLoading) {
return <p>Loading…</p>;
}
return (
<ul>
{this.props.items.map((item) => (
<li key={item.id}>
{item.label}
</li>
))}
</ul>
);
}
}
const mapStateToProps = (state) => {
return {
items: state.items,
hasErrored: state.itemsHasErrored,
isLoading: state.itemsIsLoading
};
};
const mapDispatchToProps = (dispatch) => {
return {
fetchData: (url) => dispatch(itemsFetchData(url))
};
};
connect(mapStateToProps, mapDispatchToProps)(ItemList)
function itemsHasErrored(bool) {
return {
type: 'ITEMS_HAS_ERRORED',
hasErrored: bool
};
}
function itemsIsLoading(bool) {
return {
type: 'ITEMS_IS_LOADING',
isLoading: bool
};
}
function itemsFetchDataSuccess(items) {
return {
type: 'ITEMS_FETCH_DATA_SUCCESS',
items
};
}
function itemsFetchData(url) {
return (dispatch) => {
dispatch(itemsIsLoading(true));
fetch(url)
.then((response) => {
if (!response.ok) {
throw Error(response.statusText);
}
dispatch(itemsIsLoading(false));
return response;
})
.then((response) => response.json())
.then((items) => dispatch(itemsFetchDataSuccess(items)))
.catch(() => dispatch(itemsHasErrored(true)));
};
}
function itemsHasErrored(state = false, action) {
switch (action.type) {
case 'ITEMS_HAS_ERRORED':
return action.hasErrored;
default:
return state;
}
}
function itemsIsLoading(state = false, action) {
switch (action.type) {
case 'ITEMS_IS_LOADING':
return action.isLoading;
default:
return state;
}
}
function items(state = [], action) {
switch (action.type) {
case 'ITEMS_FETCH_DATA_SUCCESS':
return action.items;
default:
return state;
}
}
combineReducers({
items,
itemsHasErrored,
itemsIsLoading
});
function configureStore(initialState) {
return createStore(
rootReducer,
initialState,
applyMiddleware(thunk)
);
}
const store = configureStore(); // You can also pass in an initialState here
render(
<Provider store={store}>
<ItemList />
</Provider>,
document.getElementById('app')
);
ReactDOM.render(<ItemList/>,mountNode)

this is due to a few issues. First, you need to setup Babel transpiler and its configuration for react in order to process ES6 import statements.
Seems like jscomplete.com (and jsFiddle) does not completely support this.
There are a few issues in the code such as referring to undeclared variables (eg: mountNode) but the main issue is that jsComplete.com not understanding the import statements.
You will have better luck running this code in a computer with VS Code or a similar editor.
Look in to create-react-app which solves all of these development setup things for you when developing react applications.

Accessing a part of reducer state from one reducer within another reducer

I do not know how to access a boolean isLoading flag from reducerForm.js reducer in reducerRegister.js. I have used combineReducers() and I use isLoading to disable a button during form submit.
It's initial state is false, after clicking submit, it changes to true. After the form submission is successful, isLoading is reset to false again. Below is the relevant code for this issue:
actionRegister.js
let _registerUserFailure = (payload) => {
return {
type: types.SAVE_USER_FAILURE,
payload
};
};
let _registerUserSuccess = (payload) => {
return {
type: types.SAVE_USER_SUCCESS,
payload,
is_Active: 0,
isLoading:true
};
};
let _hideNotification = (payload) => {
return {
type: types.HIDE_NOTIFICATION,
payload: ''
};
};
// asynchronous helpers
export function registerUser({ // use redux-thunk for asynchronous dispatch
timezone,
password,
passwordConfirmation,
email,
name
}) {
return dispatch => {
axios.all([axios.post('/auth/signup', {
timezone,
password,
passwordConfirmation,
email,
name,
is_Active: 0
})
// axios.post('/send', {email})
])
.then(axios.spread(res => {
dispatch(_registerUserSuccess(res.data.message));
dispatch(formReset());
setTimeout(() => {
dispatch(_hideNotification(res.data.message));
}, 10000);
}))
.catch(res => {
// BE validation and passport error message
dispatch(_registerUserFailure(res.data.message));
setTimeout(() => {
dispatch(_hideNotification(res.data.message));
}, 10000);
});
};
}
actionForm.js
export function formUpdate(name, value) {
return {
type: types.FORM_UPDATE_VALUE,
name, //shorthand from name:name introduced in ES2016
value
};
}
export function formReset() {
return {
type: types.FORM_RESET
};
}
reducerRegister.js
const INITIAL_STATE = {
error:{},
is_Active:false,
isLoading:false
};
const reducerSignup = (state = INITIAL_STATE , action) => {
switch(action.type) {
case types.SAVE_USER_SUCCESS:
return { ...state, is_Active:false, isLoading: true, error: { register: action.payload }};
case types.SAVE_USER_FAILURE:
return { ...state, error: { register: action.payload }};
case types.HIDE_NOTIFICATION:
return { ...state , error:{} };
}
return state;
};
export default reducerSignup;
reducerForm.js
const INITIAL_STATE = {
values: {}
};
const reducerUpdate = (state = INITIAL_STATE, action) => {
switch (action.type) {
case types.FORM_UPDATE_VALUE:
return Object.assign({}, state, {
values: Object.assign({}, state.values, {
[action.name]: action.value,
})
});
case types.FORM_RESET:
return INITIAL_STATE;
// here I need isLoading value from reducerRegister.js
}
return state;
};
export default reducerUpdate;
reducerCombined.js
import { combineReducers } from 'redux';
import reducerRegister from './reducerRegister';
import reducerLogin from './reducerLogin';
import reducerForm from './reducerForm';
const rootReducer = combineReducers({
signup:reducerRegister,
signin: reducerLogin,
form: reducerForm
});
export default rootReducer;
This is where I use isLoading:
let isLoading = this.props.isLoading;
<FormGroup>
<Col smOffset={4} sm={8}>
<Button type="submit" disabled={isLoading}
onClick={!isLoading ? isLoading : null}
>
{ isLoading ? 'Creating...' : 'Create New Account'}
</Button>
</Col>
</FormGroup>
Mapping state to props within the same component
function mapStateToProps(state) {
return {
errorMessage: state.signup.error,
isLoading: state.signup.isLoading,
values: state.form.values
};
}

This is covered in the Redux FAQ at https://redux.js.org/faq/reducers#how-do-i-share-state-between-two-reducers-do-i-have-to-use-combinereducers:
Many users later want to try to share data between two reducers, but find that combineReducers does not allow them to do so. There are several approaches that can be used:
If a reducer needs to know data from another slice of state, the state tree shape may need to be reorganized so that a single reducer is handling more of the data.
You may need to write some custom functions for handling some of these actions. This may require replacing combineReducers with your own top-level reducer function. You can also use a utility such as reduce-reducers to run combineReducers to handle most actions, but also run a more specialized reducer for specific actions that cross state slices.
Async action creators such as redux-thunk have access to the entire state through getState(). An action creator can retrieve additional data from the state and put it in an action, so that each reducer has enough information to update its own state slice.

A reducer cannot access another reducer's state, but if you're using redux-thunk you can do so from within an action creator. As an example, you can define an action creator like this:
export const someAction = () =>
(dispatch, getState) => {
const someVal = getState().someReducer.someVal;
dispatch({ type: types.SOME_ACTION, valFromOtherReducer: someVal });
};

React Redux works on unidirectional data flow.
Action ---> Reducer /store ---> Reducer
Reducer works on small subset of store, you can not access store inside reducer which is not part of Reducer. you can either need to fire new action from the component based on reducer state return.