React redux action resetting non attached state - reactjs

When triggering an action updateLog, it seems it resets other state items. In my case updateLog should manipulate log and that works just fine. The thing is it also resets tasks to the default values. What am I doing wrong here?
Component:
class Generator extends Component {
render() {
return (
<div className="generator">
<Inputs />
<button onClick={this.generate.bind(this)}>Go!</button>
<Log />
</div>
);
}
generate() {
this.props.updateLog("ANYTHING!");
}
}
function mapStateToProps(state) {
return {
tasks: state.tasks
};
}
function matchDispatchToProps(dispatch){
return bindActionCreators({updateLog: updateLog}, dispatch);
}
export default connect(mapStateToProps, matchDispatchToProps)(Generator);
Action:
export const updateLog = (message) => {
return {
type: 'LOG_UPDATED',
payload: message
}
};
Logreducer:
const initialLog = "";
export default function (state = initialLog, action) {
switch (action.type) {
case 'LOG_UPDATED':
return state + "\n" + action.payload
break;
}
return state;
}
All reducers:
const allReducers = combineReducers({
tasks: taskReducer,
log: logReducer
});
export default allReducers
taskReducer:
export default function (state = null, action) {
switch (action.type) {
case 'TASK_UPDATED':
var tasks = Object.assign({}, action.payload);
return tasks;
break;
}
// Default task properties
return {
CreateDatabaseTask: {
enabled: false,
type: "sqlite"
}
}
}

The problem lies in your task reducer. If the action type matches none of the ones defined in the switch statement, you should return the current state. Instead, you are returning the initial state.
Try changing it to return the current state instead:
const initialState = {
CreateDatabaseTask: {
enabled: false,
type: "sqlite"
}
}
export default function (state = initialState, action) {
switch (action.type) {
case 'TASK_UPDATED':
var tasks = Object.assign({}, action.payload);
return tasks;
break;
default:
return state;
}
}

Related

Returning bool value react redux

I have two actions one that will close my menu (would be false) and one that will open the menu (would be true) in my reducer I set the initial value to true
import { OPENED_MENU,CLOSED_MENU } from './types';
export const OpenMenu = status => ({
type:OPENED_MENU,
status
});
export const CloseMenu = status => ({
type:CLOSED_MENU,
status
});
reducer:
import { OPENED_MENU, CLOSED_MENU } from '../../actions/menu/types';
const initialState = {
status: true,
};
const CheckingStatus = ( state = initialState, action) => {
switch (action.type){
case OPENED_MENU:
return{
}
case CLOSED_MENU:
return{
}
default:
return state;
}
}
export default CheckingStatus;
I would like to know how I return in my action a false or true boolean value.
or how it could improve my logic.
You can try the following code:
import {TOGGLE_MENU } from '../../actions/menu/types';
const initialState = {
menuStatus: true,
};
const CheckingStatus = ( state = initialState, action) => {
switch (action.type){
case TOGGLE_MENU:
return{
...state,
menuStatus: !state.menuStatus
}
default:
return state;
}
}
export default CheckingStatus;
Why won't you toggle the menu value, you just create one action and use it to open and close.
On the reducer you toggle the prevState

Modifying state from another reducer in react

I'm pretty new in react so this might be a silly question.
I'm working on an app that manage rss feeds, so the structure of my entire app is similar to this one
<div className="App">
<Header />
<Feeds />
</div>
both components have their own reducer and actions.
the problem appears when I'm trying to create a new feed (actually managed in the feeds reducer) from my header component. so I have to access to the state of the feedsReducer from my headerReducer.
I'm not sure how to proceed at this point.
should I access the feeds reducer from the header component? ( this also implies that the feedsReducer needs to know my header actions)
I'll add some code to make the problem clear
index.js
import feedsReducer from './components/Feeds/FeedsReducer';
import headerReducer from './components/Header/HeaderReducer';
const rootReducer = {
feeds:feedsReducer,
header: headerReducer
};
const store = createStore(combineReducers(rootReducer));
Header/Header.js
import { ADD_FEED } from './actions';
class Header extends Component {
state = {
feedUrl: ""
};
addFeed = () => {
axios.post(
'/feeds/add',
{
url: 'myNewRssFeed.com'
})
.then(feed => {
//this is calling the HeaderReducer
this.props.addFeed(feed.data);
})
.catch(err => console.log(err));
}
}
const mapDispatchToProps = dispatch => {
return {
addFeed: (feed) => dispatch({ type: ADD_FEED, payload: { feed } })
};
};
export default connect(null, mapDispatchToProps)(Header);
Header/actions.js
export const ADD_FEED = "ADD_FEED";
HeaderComponent/HeaderReducer.js
const reducer = (state, action) => {
const newState = {
...state
}
switch (action.type) {
case storeActions.ADD_FEED:
// at this point newState.feeds doesn't exist because it's part from the FeedsReducer
newState.feeds = newState.feeds.push(action.payload.feed);
break;
}
return newState;
}
Feeds/FeedsReducer.js
const initialState = {
feeds: []
}
const reducer = (state = initialState, action) => {
const newState = {
...state
}
switch (action.type) {
//this action is commented because was recently moved to the headerComponent/actions.js
/* case storeActions.ADD_FEED:
newState.feeds = newState.feeds.push(action.payload.feed);
break; */
case storeActions.LOAD_FEEDS:
newState.feeds = action.payload.feeds;
break;
}
return newState;
}
Thanks in advice.
I don't really think you need to access reducer in any way. Reducer function will update store based on action it's listenning to.
Here is an example:
import * as constants from 'constantpathhere';
export function feedReducer(state = INITIAL_STATE, action) {
const { type, payload } = action;
switch(type) {
case constants.ADD_FEED: // listen to ADD_FEED action
return {... state, data: payload };
case constants.LOAD_FEEDS: // listen to LOAD_FEEDS
return {...state, loading: true }
...
default:
return state;
}
}
export function headReducer(state = INITIAL_STATE, action) {
const { type, payload } = action;
switch(type) {
case constants.ANY_ACTION: // listen to ADD_FEED action
return {... state, data: payload };
case constants.ANY_OTHER_ACTION_LOADING: // listen to LOAD_FEEDS
return {...state, loading: true }
...
default:
return state;
}
}
//ACTIONS
export function loadFeeds() {
return {
type: constants.LOAD_FEEDS
}
}
export function addFeed(payload) {
return {
type: constants.ADD_FEED,
payload
}
}
export function triggerAnyAction(payload) {
return {
type: constants.ANY_ACTION,
payload
}
}
These actions above may be dispatched from any component, be it Header or Feeds, only reducer(s) listening to that particular action will update the store.
Briefly, you only need to know which action to dispatch where and only reducer listing to that action will do whatever you instructed it to do

Why my action creators is not defined in react redux app?

I have made component Notification and I want its action and reducer to be available to all the app.
But I am not getting why my action is saying not defined.
Here is the code
import { SHOW_NOTIFICATION, SHOW_NOTIFICATION_FULFILLED } from 'constants/actionTypes'
// notification
const initialState = {
notification: {}
}
export function fetchNotification (data) {
return {
type: 'SHOW_NOTIFICATION',
data: data
}
}
export default function notificationReducer (state = initialState, action) {
switch (action.type) {
case SHOW_NOTIFICATION_FULFILLED: {
return {
...state,
notification: action.data
}
}
}
return state
}
SHOW_FULFILLED is showing defined but never used so whats the mistake
You call action with SHOW_NOTIFICATION but reducer handle only SHOW_NOTIFICATION_FULFILLED. Use same action type in reducer as in action.
// notification
const initialState = {
notification: {}
}
export function fetchNotification (data) {
return {
type: 'SHOW_NOTIFICATION', // <--
data: data
}
}
export default function notificationReducer (state = initialState, action) {
switch (action.type) {
case SHOW_NOTIFICATION: { // <--
return {
...state,
notification: action.data
}
}
}
return state
}

REACT can't do object assign in reducer

I got a problem when do objectAssign to change the state in store into a new data from server, It always get a null as the result.
i call my action in onEnter function(React-Router)
export function GET_SetupTabTitles() {
store.dispatch(getSetupTabTitles());
}
this is my action :
import {
TOGGLE_DRAWER_IN_APPBAR,
GET_SETUP_TAB_TITLES,
} from '../constants/actionTypes';
import axios from 'axios';
const ROOT_URL = 'http://localhost:8000';
export function toggleDrawerInAppBar(open){
return { type: TOGGLE_DRAWER_IN_APPBAR, openStatus: open }
}
export function getSetupTabTitles(){
return function(dispatch){
axios.get(`${ROOT_URL}/api/component/getSetupTabTitles`)
.then(response => {
dispatch({type: GET_SETUP_TAB_TITLES,
payload: response
});
});
}
}
this is my initial state on reducer :
export default {
auth: {
authenticated: (localStorage.getItem('laravel_user_token') !== null),
userinfo: {
name: null
},
error:""
},
comp: {
openDrawerStatus: false,
setupTabTitles: null,
}
};
and this is my reducer :
import {
TOGGLE_DRAWER_IN_APPBAR,
GET_SETUP_TAB_TITLES,
} from '../constants/actionTypes';
import initialState from './initialState';
import objectAssign from 'object-assign';
const compReducer = (state = initialState.comp, action) => {
switch (action.type) {
case TOGGLE_DRAWER_IN_APPBAR:
return objectAssign({}, state, {openDrawerStatus: action.openStatus});
case GET_SETUP_TAB_TITLES:
console.log(action.payload.data);
return objectAssign({}, state, {setupTabTitles: action.payload.data});
default:
return state;
}
};
export default compReducer;
when i do console.log inside
case GET_SETUP_TAB_TITLES:
it show :
Array[2]0: 0:Object 1:Object
On using JSON.stringify() it shows me [{"tabTitle":"Events"},{"tabTitle":"Tasks"}]
but my state (setupTabTitles) didn't change at all.
i do try this one :
case GET_SETUP_TAB_TITLES:
state.setupTabTitles.push(action.payload.data[0]);
return state;
it work, but i don't want to direct change the state.
You don't need to import ojectAssign from 'object-assign'; when you make use of the current ES6 syntax in your code. You only need Object.assign. Also since your action.data.payload is an array and you need to append to an array you can use the spread operator like
return {
...state,
setupTabTitles: [...state.setupTabTitles, action.payload.data]
}
Also you need to initialise you componentState to be an empty array and not null or undefined. Change that to below code
export default {
auth: {
authenticated: (localStorage.getItem('laravel_user_token') !== null),
userinfo: {
name: null
},
error:""
},
comp: {
openDrawerStatus: false,
setupTabTitles: [],
}
};
Try it like below
const compReducer = (state = initialState.comp, action) => {
switch (action.type) {
case TOGGLE_DRAWER_IN_APPBAR:
return Object.assign({}, state, {openDrawerStatus: action.openStatus});
case GET_SETUP_TAB_TITLES:
console.log(action.payload.data);
return {
...state,
setupTabTitles: [...state.setupTabTitles, ...action.payload.data]
}
default:
return state;
}
};
The syntax of objectAssign is different from what I use, you can see it here
var state = {
openDrawerStatus: false,
setupTabTitles: [],
}
var payload = [{"tabTitle":"Events"},{"tabTitle":"Tasks"}]
console.log( {
...state,
setupTabTitles: [...state.setupTabTitles, ...payload]
});
As you are already using ES6, you could just use the object spread operator and get rid of the object-assign library, it would be like this:
import {
TOGGLE_DRAWER_IN_APPBAR,
GET_SETUP_TAB_TITLES,
} from '../constants/actionTypes';
import initialState from './initialState';
const compReducer = (state = initialState.comp, action) => {
switch (action.type) {
case TOGGLE_DRAWER_IN_APPBAR:
return { ...state, openDrawerStatus: action.openStatus };
case GET_SETUP_TAB_TITLES:
return { ...state, setupTabTitles: action.payload.data };
default:
return state;
}
};
export default compReducer;
In your initial state, I would change setupTabTitle from null to an empty array []:
setupTabTitles: [],
And in your reducer, append data to this array:
const compReducer = (state = initialState.comp, action) => {
switch (action.type) {
...
case GET_SETUP_TAB_TITLES:
return {
...state,
setupTabTitles: [
...state.setupTabTitles,
...action.payload.data
]
}
...
}
};
Or if you don't want to append, just replace, I would do:
setupTabTitles: [
...action.payload.data
]

Why is ES6 treating this as a NaN?

I'm using React and Redux to try to increase the value of a prop everytime a button is clicked. However the prop is being treated as a NaN for some reason.
This is my reducer:
export default function(){
return 0;
}
And the other reducer:
export default function (state = null, action) {
switch (action.type) {
case 'VALUE_INCREMENTED':
return action.payload;
break;
}
return state;
}
This is my action:
export const incrementValue = (val) =>{
console.log("You incrementend the value to: ", val+1);
return {
type: 'VALUE_INCREMENTED',
payload: val+1
}
};
And this is is the container:
class Thermo extends Component{
getValue(){
return this.props.val;
}
render(){
return(
<div>
<Thermometer
min={0}
max={90}
width={10}
height={230}
backgroundColor={'gray'}
fillColor={'pink'}
current={this.props.val}
/>
<input type = "submit" onClick={() => this.props.incrementValue(this.props.val)}value="+"/>
</div>
)
}
}
function mapStateToProps(state){
return{
val: state.val
};
}
function matchDispatchToProps(dispatch){
return bindActionCreators({incrementValue: incrementValue}, dispatch);
}
export default connect(mapStateToProps, matchDispatchToProps)(Thermo);
Here you are setting initial state to null;
export default function (state = null, action) {
switch (action.type) {
case 'VALUE_INCREMENTED':
return action.payload;
break;
}
return state;
}
if you change your reducer to the following you will then have a default state object with a key for val and value of 0. Then when you map state to props it will get the correct value and not undefined.
var initialState = {
val: 0
}
export default function (state = initialState, action) {
switch (action.type) {
case 'VALUE_INCREMENTED':
return {...state, val: action.payload};
break;
}
return state;
}
You need an initial state in your reducer e.g.
export default function(state=0){
return state;
}

Resources