Our project is mainly written in AngularJS 1.5, but we are transitioning over to ReactJS. We're using react2angular to allow our AngularJS project to consume React components. Our project is also using ngRedux to store certain data. While I'm able to save certain data using Angular, I am unable to access the Redux store data via the mapped props.
this.props.interval in CardController.js is undefined. I am able to get store data using this.props.store.getState(), but React is not able to detect if there has been a change in the Redux store in componentWillReceiveProps, so I don't think that's an option.
CardContainer.js
import { connect } from 'react-redux';
import CardController from './CardController';
const mapStateToProps = (state) => {
return {
interval: state.interval
};
};
const mapDispatchToProps = null;
const ScorecardContainer = connect(
mapStateToProps,
mapDispatchToProps,
)(CardController);
export default CardContainer;
CardController.js
import React from 'react';
import PropTypes from 'prop-types';
import Card from './Card';
export default class CardController extends React.Component {
constructor(props) {
super(props);
this.state = {
selected: this.props.interval,
state: this.props.$scope.filterParams,
};
}
render() {
return (
<div className="CardController">
<Card
selected={this.state.selected}
/>
</div>
);
}
}
CardController.propTypes = {
interval: PropTypes.string,
};
reducers.js
import * as actionTypes from './actionTypes';
const initialState = {
interval : 'week'
};
export const setInterval = (state, action) => {
return {
...state,
interval : action.interval
};
};
export const reducer = (state = initialState, action) => {
switch (action.type) {
case actionTypes.SET_INTERVAL :
return setInterval(state, action);
default :
return state;
}
};
export default reducer;
Turns out that the problem was that I forgot to drill down. Instead of state.interval, it should have been state.card.interval.
Related
I am trying to display the redux state into my react component, but it comes undefined.
I am unable to understand where am I doing the mistake.
I am learning redux by trying a coding on my own by going through the redux documentation.
Main React component
import React, { Component } from 'react';
import Counter from './components/Counter';
import {Provider} from 'react-redux';
import store from './redux/store';
class App extends Component {
render() {
return (
<Provider store={store}>
<div>
<h1>COUNTER APPlICATION</h1>
<Counter />
</div>
</Provider>
)
}
}
export default App;
React Component
import React, { Component } from 'react';
import {connect} from 'react-redux';
import {addNumber} from '../redux/actions/addAction';
import {substractNumber} from '../redux/actions/substractAction';
export class Counter extends Component {
render() {
return (
<div>
<h1>Value:{this.props.value}</h1>
<h1>Add Only Value:{this.props.addOnly}</h1>
<button onClick = {() => this.props.addNumber}>+</button>
<button onClick = {() => this.props.substractNumber}>-</button>
</div>
)
}
}
const mapStateToProps = state => ({
value: state.value
});
export default connect(mapStateToProps, {addNumber, substractNumber})(Counter);
addReducer
import {ADDITION} from '../actions/actionTypes';
const initialState = {
value: 50
}
export default function (state = initialState, action) {
switch(action.type){
case ADDITION:
return{
value: state.value + 2
}
default:
return state
}
}
substractReducer
import {SUBSTRACTION} from '../actions/actionTypes';
const initialState = {
value: 50
}
export default function (state = initialState, action) {
switch (action.type) {
case SUBSTRACTION:
return {
value: state.value - 2
}
default:
return state
}
}
rootReducer
import {combineReducers} from 'redux';
import addReducer from './addReducer';
import substractReducer from './substractReducer';
export default combineReducers({
add: addReducer,
substract: substractReducer
})
store
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers/rootReducer';
import thunk from 'redux-thunk';
export default createStore(rootReducer, applyMiddleware(thunk));
action type
export const ADDITION = 'ADDITION';
export const SUBSTRACTION = 'SUBSTRACTION';
addAction
import {ADDITION} from './actionTypes';
export const addNumber = () => (dispatch) => {
return dispatch({
type: ADDITION,
payload: 2
})
}
substractAction
import {SUBSTRACTION} from './actionTypes';
export const substractNumber = () => (dispatch) => {
return dispatch({
type: SUBSTRACTION,
payload: 2
})
}
You are doing wrong.
you state is just counter value, so don't split into two reducers. You only need two case statement, one for ADD, one for SUBTRACT.
Don't use combineReducer and it you want, use one key like counter for counter reducer
in mapStateToProp, get value like state.counter.value where counter is name of key you used in combineReducer({ counter: counterReducer })
Your button actions/onclick is wrong
import {ADDITION, SUBTRACTION} from '../actions/actionTypes';
const initialState = {
value: 50
}
export default function (state = initialState, action) {
switch(action.type){
case ADDITION:
return
value: state.value + 2
}
case SUBTRACTION:
return{
value: state.value + 2
}
default:
return state
}
}
///// no need to regester 2 reducer, just add one above like this
export default combineReducers({
counter: counterReducer
});
/// In Counter component , mapStateToProp
const mapStateToProps = state => ({
value: state.counter.value
});
// Just pass redux actions to onClick in button like this
<button onClick = {this.props.addNumber}>+</button>
<button onClick = {this.props.substractNumber}>-</button>
When you combineReducers like this:
export default combineReducers({
add: addReducer,
substract: substractReducer
})
Your state tree will look like:
{
add: {
value: 0
},
subtract: {
value: 0
}
}
So you should only have a single reducer in order to reduce over the same value.
I am trying to set up Redux in React for the first time and I can't seem to pass my initial state from the store to the component. My store file is setting state to the return value of the reducer. Here is what happens when I log this.props to the console
Component
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { exampleAction } from '../../actions';
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
console.log(this.props)
return (
<div>
<p>this is {this.props.examplePropOne}</p>
</div>
);
}
}
const mapStateToProps = state => ({
examplePropOne: state.examplePropOne,
examplePropTwo: state.examplePropTwo
});
const mapDispatchToProps = dispatch => {
return bindActionCreators({ exampleAction }, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(Header);
Reducer
import { EXAMPLE_ACTION } from './../actions/types'
const initialState = {
examplePropOne : 'Example Property One',
examplePropTwo : 'Example Property Two'
}
export default function (state = initialState, action) {
switch(action.type) {
case EXAMPLE_ACTION:
return {
...state,
examplePropOne: action.payload
}
default:
return state
}
}
Action
import { EXAMPLE_ACTION } from './types'
export const exampleAction = text => ({
type: EXAMPLE_ACTION,
payload: text,
})
[Edit]
Here is what happens when I log the state within mapStateToProps
import React from 'react';
import { createStore, combineReducers } from 'redux';
import reducers from '../reducers';
export const store = createStore(
combineReducers({
state: reducers
}),
);
With how combineReducers() was used with state passed in as a key, your mapStateToProps() would need to look like this instead to access examplePropOne and examplePropTwo:
const mapStateToProps = state => ({
examplePropOne: state.state.examplePropOne,
examplePropTwo: state.state.examplePropTwo
});
Given that combineReducers():
The state produced by combineReducers() namespaces the states of each
reducer under their keys as passed to combineReducers()
The issue is that:
export const store = createStore(
combineReducers({
state: reducers
}),
);
The key state passed to combineReducers() created a namespace/property of state. With the argument named state for the mapStateToProps(), requires that properties are accessed as state.state. This can probably be resolved by instead giving the key passed to combineReducers() a more descriptive name representing what is being used to manage in the store. For example, if it's related to authentication, it could be called some like auth. It would look like:
export const store = createStore(
combineReducers({
auth: reducers
}),
);
// ...
const mapStateToProps = state => ({
examplePropOne: state.auth.examplePropOne,
examplePropTwo: state.auth.examplePropTwo
});
Hopefully that helps!
I used reactJS and i know that a component that is wrapped with connect helper that listens to specific reducer when its reducer's state changes it causes the component to re-render.
I don't know why same procedure doesn't work for react-native, i tested my action creators as well as reducers and checked hundred percent that they return new state, And when i checked componentWillRecieveProps i found that the new state is returned correctly and the component doesn't re-render.
Reducer
const INITIAL = {
isSigned: null
}
export default (state = INITIAL, action) => {
switch(action.type){
case SIGNED_IN : return {...state, isSigned: true};
case LOGGED_OUT: return {...state, isSigned: false};
default: return state;
}
}
Component
import React, { Component } from 'react';
import { ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../../actions';
class Loading extends Component {
constructor(props){
super(props);
}
componentDidMount(){
this.props.checkSigned();
switch(this.props.isSigned){
case null : return;
case false : this.props.navigation.navigate('Auth');
case true : this.props.navigation.navigate('App')
}
}
render(){
return (
<ActivityIndicator size="large" color="black" />
)
}
}
const mapStateToProps = ({signed}) => {
const {isSigned} = signed;
return {
isSigned
}
}
export default connect(mapStateToProps, actions)(Loading);
Actions
export const SIGNED_IN = 'SIGNED_IN';
export const LOGGED_OUT = 'LOGGED_OUT';
//Action Creators
export const checkSigned = () => async dispatch => {
let token = await AsyncStorage.getItem('fb_token');
if(token){
dispatch({type: SIGNED_IN})
}
dispatch({type: LOGGED_OUT})
}
You need to use bindActionCreators to dispatch your actions as props
import { bindActionCreators } from 'redux';
const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);
const mapStateToProps = state => {
return {
isSigned: state.isSigned
}
}
export default connect(mapStateToProps, actions)(Loading);
// In actions, you need to fix action code
export const checkSigned = () => async dispatch => {
let token = await AsyncStorage.getItem('fb_token');
if(token){
dispatch({type: SIGNED_IN});
} else {
dispatch({type: LOGGED_OUT});
}
}
I think the problem is that you're running your state change logic in componentDidMount. componentDidMount doesn't run when your component re-renders, but componentDidUpdate does. Put your logic there.
I am trying to initialise a basic store from a root reducer with initial state.
My root reducer
import Entity from "../api/Entity";
import { UPDATE_GROUPING } from "../constants/action-types";
import IAction from "../interfaces/IAction";
import IStoreState from "../interfaces/IStoreState";
const initialState:IStoreState = {
callsInProgress: false,
groupingOptions: ["Strategy", "User", "Date"],
groupingType: "Strategy",
numberOfCalls: 2,
items: [new Entity()],
};
const rootReducer = (state = initialState, action: IAction<object>) => {
switch (action.type) {
case UPDATE_GROUPING:
return { ...state, groupingType: action.payload};
default:
return state;
}
};
export default rootReducer;
When I create the store with the rootreducer as below
import { createStore } from 'redux';
import rootreducer from '../reducers/rootreducer';
const store = createStore(rootreducer);
export default store;
It works. The React components get initialised with the correct state for groupingType, groupingOptions etc.
However if I try and use a combineReducers() approach - even with just this single root reducer (should be identical) then when my components load, they do not have any initial state passed.
ie
import { createStore } from 'redux';
import reducers from '../reducers';
const store = createStore(reducers);
export default store;
My index.ts in the reducers folder which returns a combineReducers() call (the one which doesnt work)
import {combineReducers} from 'redux';
import rootreducer from './rootreducer';
// main reducers
export default combineReducers({
rootreducer
});
And lastly my component which hooks into redux and should import the state from the redux store
import updateGroupingType from "./actions/uiactions";
import './App.css';
import * as React from 'react';
import { connect } from 'react-redux';
import IStoreState from './interfaces/IStoreState';
interface IGroupingProps {
groupingOptions? : string[],
groupingType? : string,
updateGroupingAction? : any
}
class GroupingSelector extends React.Component<IGroupingProps, {}> {
constructor(props: IGroupingProps) {
super(props);
this.onGroupingChange = this.onGroupingChange.bind(this);
}
public render() {
if (this.props.groupingOptions == null)
{
return null;
}
return (
<div className="Grouping-selector">
<div className="Horizontal-panel-right Grouping-search-combo">
<select onChange={this.onGroupingChange}>
{this.props.groupingOptions.map((name, index)=>
<option key={index}>{name}</option>
)}
</select>
</div>
<div className="Content Horizontal-panel-right">
Group by
</div>
</div>);
}
private onGroupingChange(e: any) {
const { value } = e.target;
this.props.updateGroupingAction(value);
}
}
const mapStateToProps:any = (state: IStoreState) => {
return {
groupingOptions: state.groupingOptions,
groupingType: state.groupingType,
};
}
const mapDispatchToProps = (dispatch:any) => {
return {
updateGroupingAction: (groupingType:string) => dispatch(updateGroupingType(groupingType))
};
};
export default connect(mapStateToProps, mapDispatchToProps)(GroupingSelector);
Why is my usage of combineReducers not working in the same way as when I use the single rootreducer?
From the doc
The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore.
The resulting reducer calls every child reducer, and gathers their results into a single state object.
The state produced by combineReducers() namespaces the states of each reducer under their keys as passed to combineReducers()
When you are using rootReducer as a key inside of your combineReducers, it will create a state which shape will be
{ "rootReducer": YOUR_PREVIOUS_STATE}
You should use combineReducers only if you have different reducers for each key
Your root reducer should be key value pairs like,
export default combineReducers({
home:homeReducer
});
So that in your component, mapStateToProps() you will be able to access these values as,
const mapStateToProps = (state: any) => {
return {
users: state.home
};
};
I'm new to redux and having trouble wrapping my head around presentational and container components.
Relevant stack:
react v0.14.8
react-native v0.24.1
redux v3.5.2
react-redux v4.4.5
The issue:
I have a login button component, which when rendered checks the login status and calls the onSuccessfulLogin action which updates the state with the user's Facebook credentials.
However, when trying to separate this into separate presentational/container components, I'm unable to call the onSuccessfulLogin action: Error: onSuccessfulLogin is not defined.
What am I doing wrong here? I'd imagine there's something simple that I'm not understanding with the relationship between the two components and the connect() function.
Presentational Component (Login.js)
import React, { PropTypes } from "react-native";
import FBLogin from "react-native-facebook-login";
import UserActions from "../users/UserActions";
class LoginPage extends React.Component {
render() {
const { userData, onSuccessfulLogin } = this.props;
return (
<FBLogin
permissions={["email","user_friends"]}
onLoginFound= { data => {
onSuccessfulLogin(data.credentials);
}}
/>
)
}
};
export default LoginPage;
Container Component (LoginContainer.js)
import { connect } from 'react-redux';
import LoginPage from "../login/LoginPage";
import UserActions from "../users/UserActions";
const mapDispatchToProps = (dispatch) => {
return {
onSuccessfulLogin: (userData) => {
dispatch(UserActions.userLoggedIn(userData))
}
}
}
const mapStateToProps = (state) => {
return {
userData: state.userData
}
}
const LoginContainer = connect(
mapStateToProps,
mapDispatchToProps
)(LoginPage);
export default LoginContainer;
Also, if I wanted to make the updated state.userData accessible to the LoginPage component, how would I do that? Any help is appreciated!
Solved! When using ES6 classes, you're required to call super(props) in a constructor method in order to access the container's properties in the connected presentational component:
class LoginPage extends React.Component {
constructor(props){
super(props);
}
render(){
// ...
}
}
Your container component is supposed to be a component and it must have a render function with the dumb/presentational components you want to render.
import { connect } from 'react-redux';
import LoginPage from "../login/LoginPage";
import UserActions from "../users/UserActions";
class LoginContainer extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<LoginPage userData={this.props.userData}
onSuccessfulLogin={this.props.onSuccessfulLogin}
/>
)
}
};
const mapDispatchToProps = (dispatch) => {
return {
onSuccessfulLogin: (userData) => {
dispatch(UserActions.userLoggedIn(userData))
}
}
}
const mapStateToProps = (state) => {
return {
userData: state.userData
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(LoginPage);