I m learning redux and react and I'm having a little problem concerning good practices of props initialization.
In fact, I m having a route that looks like following :
/pokemons/:name
And here's the concerned component :
import React from 'react';
import {connect} from 'react-redux';
import {showDetail} from './../../redux/modules/pokemons';
export class PokeDetail extends React.Component{
render(){
return(
<div>
{this.currentPokemon.name}
</div>
)
}
}
const mapStateToProps = state => ({
currentPokemon:state.pokemons.currentPokemon
});
export default connect((mapStateToProps),{
showDetail
})(PokeDetail);
The fact is that I don't know at all when / where to send my action to change my app state. In fact, when should I send my "showDetail('myPokemonName')" so that the currentPokemon state would change and my app work ?
I m needing some good practices if possible
Thanks for your help
EDIT :
My PokeView :
import React from 'react';
import {connect} from 'react-redux';
import {loadRemoteAction} from './../../redux/modules/pokemons';
import {Link} from 'react-router';
export class PokeView extends React.Component {
render(){
let i = 0;
return (
<div>
<h4>Super page</h4>
<button onClick={this.props.loadRemoteAction}>Start</button>
<ul>
{
this.props.pokemons.map(item => {
i++;
return <li key={i}><Link to={`/pokemons/${item.name}`}>{item.name}</Link></li>
})
}
</ul>
</div>
);
}
}
const mapStateToProps = state => ({
pokemons : state.pokemons.pokemons
});
export default connect((mapStateToProps), {
loadRemoteAction
})(PokeView);
My action / reducer :
import immutable from 'immutable';
/**
* Action part
*/
export const LOAD_REMOTE = 'LOAD_REMOTE';
export const SHOW_DETAIL = 'SHOW_DETAIL';
export function loadRemoteAction() {
return dispatch => {
fetch('http://pokeapi.co/api/v2/pokemon/')
.then(res => res.json())
.then(res => dispatch({
type:LOAD_REMOTE,
payload:res.results
}));
};
}
export function showDetail(name){
return {
type:SHOW_DETAIL,
payload:name
}
}
/**
* Reducer part
*/
const ACTION_HANDLER = {
[LOAD_REMOTE] : (state, action) => {
if(action.payload) return Object.assign({},state,{pokemons:state.pokemons.concat(action.payload)});
return state;
},
[SHOW_DETAIL] : (state, action) =>{
let currentPokemon;
for(const pkm of state.pokemons){
if(pkm.name === action.payload) currentPokemon = pkm;
}
if(action.payload) return Object.assign({},state,{currentPokemon:currentPokemon});
return state
}
}
const initialState = {pokemons:immutable.fromJS([]), currentPokemon:immutable.fromJS({name:''})};
export default function pokemonReducer (state = initialState, action) {
const handler = ACTION_HANDLER[action.type]
return handler ? handler(state, action) : state
}
Generally speaking, an action is when something happens in the world - this would usually either be something a user does, or e.g. an asynchronous answer from the backend to an ajax call. These are the situations in which you would want to send an action (containing the information about what was changed) so that your state tree can be updated accordingly.
In your case, if you show a list of Pokemons somewhere else on the screen, and the user clicks on one of them, then that click would save the clicked-on Pokemon to the state tree, and your PokeDetail component would then pick up this information and display the details for the selected Pokemon.
In your case, the PokeView render function might look like this:
export class PokeView extends React.Component {
render(){
return (
<div>
<h4>Super page</h4>
<button onClick={this.props.loadRemoteAction}>Start</button>
<ul>
{
this.props.pokemons.map((item, i) => <li key={i}><button onClick={this.props.dispatch(showDetail(item.name))}>{item.name}</button></li> )
}
</ul>
</div>
);
}
}
and the PokeDetail class might look like this:
export class PokeDetail extends React.Component{
render(){
return <div>{this.props.currentPokemon.name}</div>;
}
}
The other question is, how does the information go into my app initially? If the data is static, you can add it to your initial state tree (one usually passes that to the reducer function as default parameter), or you could query the data from the backend via an Ajax call. The latter can be done in the componentDidMount lifecycle method of your component. (For this, you need redux-thunk in order to have an action that works together with the callback and the asynchronous answer from the backend).
You should call showDetail action in componentWillMount function.
import React from 'react';
import {connect} from 'react-redux';
import {showDetail} from './../../redux/modules/pokemons';
export class PokeDetail extends React.Component{
componentWillMount() {
// If you are using react-router, route params will be in `params` property object.
const pokemonId = this.props.params.id;
this.props.showDetail(pokemonId);
}
componentWillReceiveProps(nextProps) {
// Also you may want to update your component when url was changed.
if (nextProps.params.id !== this.props.params.id) {
this.props.showDetail(nextProps.params.id);
}
}
render(){
return(
<div>
{this.currentPokemon.name}
</div>
)
}
}
const mapStateToProps = state => ({
currentPokemon:state.pokemons.currentPokemon
});
export default connect((mapStateToProps),{
showDetail
})(PokeDetail);
When your component is mounting(or updating), you are calling your action with pokemon id. Next your store will be updated and you will receive needed props in PokeDetail component.
Also for async actions you may need redux-thunk package.
You can use redux-async-connect package. You can find sample usage of this package here.
Related
I'm learning React from past two weeks.Currently I am taking course on Udemy of Stephen Grider.
I am building a dummy streaming platform just like twitch where I can create,delete,edit and watch streams.
Right now I was writing the StreamDelete component which will show a modal where the user can either delete the particular stream or cancel.
Here is the code what I have written:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from "react";
import Modal from "../modal";
import history from "../../history";
import { connect } from "react-redux";
import { fetchIndividualStream } from "../../actions";
class streamDelete extends React.Component {
componentDidMount() {
this.props.fetchIndividualStream(this.props.match.params.id);
}
action = () => {
return (
<React.Fragment>
<button className="ui button negative">Delete</button>
<button className="ui button">Cancel</button>
</React.Fragment>
);
};
renderContent = () => {
return `Are you sure you want to delete : ${
this.props.streams
? this.props.streams[this.props.match.params.id].title
: ""
}`;
};
render() {
return (
<Modal
title="Delete Stream"
content={this.renderContent()}
action={this.action()}
onDismiss={() => history.push("/")}
/>
);
}
}
const mapStateToProps = (state) => {
return { stream: state.streams };
};
export default connect(mapStateToProps, {
fetchIndividualStream,
})(streamDelete);
Here fetchIndividualStream action will fetch the stream which is to be deleted from the API and store it in the state.
The redux store after this operation looks like this
Output I'm getting:
What should be the OUPUT:
The modal will be present when the component first render with state as null as well as when the stream is successfully fetched.The only difference is after successful fetching the title will be displayed after "Are you sure you want to delete : ".See the renderContent method.
My problem is the modal is not displaying the title even after the state is updated just like the first image. I don't know the problem however on changing some code it worked.
The changes I made were in mapStateToProps and in the renderContent method.
mapStateToProps
const mapStateToProps = (state, ownProps) => {
return { stream: state.streams[ownProps.match.params.id] };
};
renderContent method:
renderContent = () => {
return `Are you sure you want to delete : ${
this.props.stream ? this.props.stream.title : ""
}`;
};
EDIT: Link to the Github repository
You're seems to be using react-router-dom and want to get parameter from the url?
You need to use withRoute HOC to get access to .match / this.props.match.params.id. Please refer to example below.
Docs: https://reacttraining.com/react-router/core/api/withRouter
connect(mapStateToProps, mapDispatchToProps)(withRouter(Dashboard))
import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";
// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
};
render() {
const { match, location, history } = this.props;
return <div>You are now at {location.pathname}</div>;
}
}
// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);
So in your particular case you need to do this.
export default connect(mapStateToProps, {
fetchIndividualStream,
})(withRouter(streamDelete)); // withRouter higher order component.
I was learning React and Redux and while doing that I decided to make webpage with a button which on clicking would change the state. Below the button I wanted to display the current state in a different component. Though the button on clicking changes the state, but it is not getting reflected in the component. Here is my code:
App.js
import React from 'react'
import Name from './Name'
import {changeName} from './Action';
export default function App () {
return (
<div>
<button onClick={changeName}>Click me</button>
<Name />
</div>
)
}
Name.js
import React from 'react'
import {store} from './Store'
function Name(props) {
return (
<div>
My name is: {store.getState()}
</div>
)
}
export default Name
Store.js
import { createStore } from 'redux';
import {reducer} from './Reducer';
export const store = createStore(reducer, 'Tarun');
Action.js
import {store} from './Store';
export const changeName = () => {
if (store.getState() === "Tarun"){
store.dispatch({ type: 'name', payload: 'Subhash' });
}
else{
store.dispatch({ type: 'name', payload: 'Tarun' });
}
}
Reducer.js
export const reducer = function(state, action) {
if (action.type === 'name') {
return action.payload;
}
return state;
};
When I click the button, The text inside the Name component does not change. What is the issue?
You need to set up your reducer and initial store properly following the Redux documentation.
You're missing a Provider, which will provide your store to your application.
const store = createStore(reducer, applyMiddleware(thunk));
const rootElement = document.getElementById("root");
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
);
Now, your store is available to your components.
Your reducer needs an initial state too and you're always supposed to return an updated copy of your state. That said, don't change the state directly, but make a copy, change it, then return that copy.
const initialState = {
name: ""
};
const reducer = function(state = initialState, action) {
if (action.type === "name") {
return { ...state, name: action.payload };
} else {
return state;
}
};
export default reducer;
You might have noticed that I added a middleware to your store, and that's because it's usually the way to go when accessing your current reducer's state in your actions. That said, I installed redux-thunk for that, so in your action, you can have something like this:
export const changeName = () => {
return (dispatch, getState) => {
if (getState().name === "Tarun") {
dispatch({ type: "name", payload: "Subhash" });
} else {
dispatch({ type: "name", payload: "Tarun" });
}
};
};
Now, with your store being provided to your app, your reducer being done and your actions being ready to go, you can connect different components to your reducer.
You use the high order component in react-redux called connect for that. For example, in your Name component, we can connect the name to be displayed to your reducer by mapping your state to the component's props:
function Name(props) {
return <div>My name is: {props.name}</div>;
}
const mapStateToProps = state => {
return {
name: state.name
};
};
export default connect(mapStateToProps)(Name);
The nice thing here is that you can also leave the first parameter in the connect high order component empty and just pass the second, which would be the dispatch functions. Well, that's what you would do in your App component, you would connect it to the changeName action.
function App(props) {
return (
<div>
<button onClick={props.changeName}>Click me</button>
<Name />
</div>
);
}
const mapDispatchToProps = dispatch => {
return {
changeName: () => dispatch(changeName())
};
};
export default connect(
null,
mapDispatchToProps
)(App);
Now, when App dispatches a changeName action, your reducer state will be updated and the other components that are connected to the reducer's state will re-render.
Summary: Try to think of your store as an empty jar of candies. Your jar starts empty, but different actions could change what's inside the jar. On top of that, different people in the house that know where the jar is can go get some candy. Translating to your problem, your app begins with an empty name and you have an action that sets up a name. The components that know where to find that name by being connected to your reducer will know when that name changes and will get the updated name.
The final code can be found here:
The only way your name component will rerender is its props or state change, or if a parent component rerenders. Making a change in redux will not automatically do this. In order to see changes to the state, you'd need to subscribe to those changes. You could do this yourself, but a far better solution is to use react-redux, which is designed for connecting react components to redux stores.
For example, you'd add a provider to your app:
import { Provider } from 'react-redux';
import { store } from './Store'
export default function App () {
return (
<Provider store={store}>
<div>
<button onClick={changeName}>Click me</button>
<Name />
</div>
</Provider>
)
}
And then you'd use connect with your Name component:
import { connect } from 'react-redux';
function Name(props) {
return (
<div>
My name is: {props.name}
</div>
)
}
const mapStateToProps = (state) => {
return { name: state };
}
export default connect(mapStateToProps)(Name)
So i'm currently working on a PokeDex using the PokeApi available online.
The code of the project is as follows:
import React, { Component } from "react";
import PokemonCard from "./PokemonCard";
import "../ui/PokemonList.css";
import axios from "axios";
export const PokemonList = class PokemonList extends Component {
state = {
url: "https://pokeapi.co/api/v2/pokemon/",
pokemon: null
};
async componentDidMount() {
const res = await axios.get(this.state.url);
this.setState({ pokemon: res.data["results"] });
console.log(res);
}
render() {
return <div></div>;
}
};
export const PokeList = () => {
return (
<React.Fragment>
{this.state.pokemon ? (
<section className="poke-list">
{this.state.pokemon.map(pokemon => (
<PokemonCard />
))}
</section>
) : (
<h1>Loading Pokemon</h1>
)}
</React.Fragment>
);
};
As you can see, I have declared a state in the PokemonList Component class, but then I try to call it further down within the variable PokeList. The issue is that the state is not being recognized in PokeList
(I get the error "TypeError: Cannot read property 'state' of undefined" )
How can I go about calling the state that's declared in the class above?
-------------------EDIT-------------------------------
Okay, so I realized something. I have a code for my Dashboard.js that displays my list. Code is as follows
import React, { Component } from "react";
import { PokeList } from "../pokemon/PokemonList";
export default class Dashboard extends Component {
render() {
return (
<div>
<div className="row">
<div className="col">
<PokeList />
</div>
</div>
</div>
);
}
}
When I change the code from PokeList to PokemonList. so it'd be
import React, { Component } from "react";
import { PokemonList } from "../pokemon/PokemonList";
export default class Dashboard extends Component {
render() {
return (
<div>
<div className="row">
<div className="col">
<PokemonList />
</div>
</div>
</div>
);
}
}
I think get a list of 20 pokemon from the Api from
console.log(this.state.pokemon);.
But since I'm not displaying PokeList on the dashboard, then none of the pokemon cards display.
Screenshot of console output
First of all functional components are stateless. If you need to maintain state use class components or hooks. You can't use the state of one component in another component, You have two options,
Create a parent-child relationship between those components
Use state management libraries(Redux, etc)
There's a little of confusion between your PokemonList and PokeList component. I believe that what you really are looking for is to have just one of those. If you mix the two, you can have a component that controls the view based on the state, in your case, the state is your Pokemon list.
I mixed the two here, so your render method renders "Loading Pokemon" until you get your response back from axios, then when the response is back, it gets that data, updates your state and the state update trigger a re-render.
import React, { Component } from "react";
import PokemonCard from "./PokemonCard";
import axios from "axios";
class PokemonList extends Component {
state = {
url: "https://pokeapi.co/api/v2/pokemon/",
pokemon: null
};
componentDidMount() {
axios.get(this.state.url).then(res => {
this.setState({ pokemon: res.data["results"] });
});
}
render() {
let pokemonList = <h1>Loading Pokemon</h1>;
const pokemons = this.state.pokemon;
if (pokemons) {
pokemonList = (
<section className="poke-list">
<ul>
{pokemons.map(pokemon => (
<PokemonCard pokemon={pokemon} />
))}
</ul>
</section>
);
}
return <React.Fragment>{pokemonList}</React.Fragment>;
}
}
export default PokemonList;
I also created a simple PokemonCard component where I list the result from the API, just to show you that that approach works.
import React from "react";
const pokemonCard = props => {
return (
<li key={props.pokemon.name}>
<a href={props.pokemon.url}>{props.pokemon.name}</a>
</li>
);
};
export default pokemonCard;
You can find the final code, with PokeList and PokemonList now combined into one component called PokemonList here:
Keep in mind that if your render function depends on a certain state, it's probably certain that you should have that state being managed in that component, or passed down from a parent component.
In your example, I noticed you set url inside your state. URL is really not something that will change. It's a constant,so you can easily remove that from your state and place it in a variable and just leave your pokemon list there.
For example:
const url = "https://pokeapi.co/api/v2/pokemon/";
state = {
pokemon: null
};
componentDidMount() {
axios.get(url).then(res => {
this.setState({ pokemon: res.data["results"] });
});
}
import React , { Component } from "react";
import axios from "axios";
//make it as class based component
export default class PokemonList extends Component {
state = {
url: "https://pokeapi.co/api/v2/pokemon/",
pokemon: null
};
async componentDidMount() {
const res = await axios.get(this.state.url);
this.setState({ pokemon: res.data["results"] });
console.log(res);
}
render() {
//check your data here
console.log(this.state.pokemon)
{/*pass data to child*/}
return <div> <PokeList data = { this.state } /> </div>;
}
};
//export this component
export const PokeList = (props) => {
//check your data is coming or not
console.log(props.data)
//access your data from props
return (
<React.Fragment>
{props.data.pokemon ? (
<section className="poke-list">
{props.data.pokemon.map(pokemon => (
pokemon.name
))}
</section>
) : (
<h1>Loading Pokemon</h1>
)}
</React.Fragment>
);
};
You need iterate your your pokelist passing the result from your componentDidMount function to your child component as a prop , then receive your prop in the child component here it's a working codesandbox iterating your pokemon names in the pokeList child component
I have three pages, PageA, PageB and PageC, that contain a form element formField.
State in globalReducer.js
import { fromJS } from 'immutable';
const initialState = fromJS({
userInteractionBegun: false,
pageActive: '',
refreshData: true,
})
I want to dispatch an action that sets pageActive to corresponding page value(One of A, B or C) when the component(page) mounts and refreshes formField to blank if userInteractionBegun === false.
For every page component, to get pageActive state in props from globalReducer, I do,
function PageA(props) {
//.....
}
// globalState is defined in conigureStore, I am using immutable.js. Link provided below this code.
const mapStateToProps = state => ({
pageActive: state.getIn(['globalState', 'pageActive']),
})
export default connect(mapStateToProps, null)(PageA);
Link to immutable.js getIn()
store.js
import globalReducer from 'path/to/globalReducer';
const store = createStore(
combineReducers({
globalState: globalReducer,
//...other reducers
})
)
I want to abstract the logic to update pageActive every time a component(page) mounts.
I know how to abstract this logic using an HOC, but I don't know how to do it using react hooks, so that every time pageA, pageB or pageC mounts, an action to setPageActive is dispatched and formField is set to blank if userInteractionBegun is false.
For instance, I would do in pageA.js
import usePageActive from 'path/to/usePageActive';
const [pageActive, setPageActive] = useReducer(props.pageActive);
usePageActive(pageActive);
Then in usePageActive.js
export default usePageActive(pageActive) {
const [state, setState] = useState(pageActive);
setState(// dispatch an action //)
}
I haven't had much time to dip my toes into react hooks yet, but after reading the docs and playing with it for a minute, I think this will do what you're asking. I'm using built-in state here, but you could use redux or whatever else you like in the effect. You can see a working example of this code here The trick is using a hook creator to create the custom hook. That way the parent and children can keep a reference to the same state without the useEffect affecting the parent.
import React, { useState, useEffect } from 'react';
import ReactDOM from "react-dom";
const activePageFactory = (setActivePage) => (activePage) => {
useEffect(() => {
setActivePage(activePage)
return () => {
setActivePage('')
}
}, [activePage])
return activePage
}
function App() {
const [activePage, setActivePage] = useState('');
const [localPage, setLocalPage] = useState('Not Selected');
const selectedPage = () => {
switch(localPage) {
case 'A':
return <PageA useActivePage={activePageFactory(setActivePage)} />
case 'B':
return <PageB useActivePage={activePageFactory(setActivePage)} />
default:
return null;
}
}
return (
<div>
<p>Active page is {activePage}</p>
<button onClick={() => setLocalPage('A')}>
Make A Active
</button>
<button onClick={() => setLocalPage('B')}>
Make B Active
</button>
{
selectedPage()
}
</div>
);
}
function PageA({useActivePage}) {
useActivePage('A');
return (
<div>
<p>I am Page A</p>
</div>
)
}
function PageB({useActivePage}) {
useActivePage('B');
return (
<div>
<p>I am Page B</p>
</div>
)
}
I m actually studying react + redux (https://github.com/davezuko/react-redux-starter-kit) and I m having some trouble with view rerendering.
I have this action / reducer :
/* Action part */
export const ADD_TODO_ITEM = 'ADD_TODO_ITEM';
export function addTodoItem(value = null): Action {
return {
type: ADD_TODO_ITEM,
payload: value
}
}
export const actions = {
addTodoItem
}
/* Reducer part */
const actionHandler = {
[ADD_TODO_ITEM]: (state, action) => {
state.push('New todo value')
console.log(state);
return state;
}
}
const initialState = [];
export default function todoReducer(state = initialState, action) {
const reducer = actionHandler[action.type];
return reducer ? reducer(state, action) : state;
}
It's a simple action / reducer that should add a new item inside of a todo list.
The todo list component looks like following :
import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import TodoInput from './../TodoInput/TodoInput';
type Props = {
todos:Array
}
export class TodoList extends React.Component <void, Props, void>{
static propTypes = {
todos: PropTypes.array.isRequired
};
render(){
let i = 0;
return(
<div>
<h4>Paf</h4>
<TodoInput/>
<ul>
{
this.props.todos.map((item)=>{
i++;
return <li key={i}>{item}</li>
})
}
</ul>
</div>
)
}
}
const mapStateToProps = (state) =>({
todos: state.todos
});
export default connect((mapStateToProps), {
})(TodoList)
As you can see, I have a TodoInput component that only sends an action event when a button is pressed. This part works well, I can log it inside of the action / reducer file.
The fact is that my TodoList component is never rerendered, and my item are not displayed as expected.
It's more weird that in fact the list appears on the screen when I use the livereload tool to code (modifying a line in my editor makes a simple refresh on browser, and at this moment the state.todos is well rendered on the screen)
It seems that I made something bad, and I can't put a finger on it.
Can you help me ?
EDIT : Problem solved. In fact, I was using a mutating state, and it seems that redux can't detect the change on this. refers to https://github.com/reactjs/redux/issues/585