Cum trimit props urile la componentele copii când folosesc Redux

Limbaje de Programare JavaScript / Node
,
1


Deși în Provider îi trimit store ul , nu înțeleg de ce nu pot accesa din ruta care face match la calea curentă, props urile (posts și comments) care ajung până în componenta Switch dar nu se propagă mai departe.

2

Salut, ca sa ai acces la state intr-o componenta trebuie sa o conectezi la store:
Exemplu pentru components/PhotoGrid.js

import React from 'react'
import { connect } from 'react-redux';

const PhotoGrid = (props) =>
  <div className='photo-grid'>
    Hello world
    {
      JSON.stringify(props.posts, null, ' ')
    }
  </div>

// Ar trebui sa alegi doar proprietatile de care ai nevoie
const mapStateToProps = state => state;

export default connect(mapStateToProps)(PhotoGrid);

Resurse:
https://redux.js.org/docs/basics/UsageWithReact.html


4 Likes
3

Tot în legătură cu propsurile: cum fac să se propage propsurile addComment, increment, removeComment de la componenta Main la rutele PhotoGrid și Single ?
Am încercat să le returnez din componenta App dar nu funcționează,

function mapStateToProps(state) {
  console.log('App state', state)
  return {
    posts: state.posts,
    comments: state.comments,
    increment: state.increment,
    addComment: state.addComment,
    removeComment: state.removeComment
  }
}

Ultima versiune a codului este aici - https://codesandbox.io/s/0vp6p22qpw

4

Hmm, interesant.

 {React.cloneElement(this.props.children, this.props)}
5

Cel mai bine, conectezi fiecare componenta folosita in ruta la redux si pasezi de acolo mai departe datele.
Main-ul pare mai mult folosit pentru layout, deci nu prea are rost sa-l conectezi la redux :smiley:
Ex:

import React from 'react'
import {connect} from 'react-redux'
import { bindActionCreators } from 'redux';
import * as actions from '../actions/actionCreators.js';
import Photo from './Photo'

const PhotoGrid = props => {
  console.log(props);
  return (
    <div className='photo-grid'>
      {/* <pre>{JSON.stringify(props.posts, null, ' ')}</pre> */}
      {props.posts.map((post, i) => <Photo {...props} key={i} i={i} post={post} />)}
    </div>
  );
}


const mapStateToProps = state => state;
// Automat
const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);
/* Manual
const anotherWayToDispatch = dispatch => ({
  addWowComment: (par1, par2) => dispatch(actions.addComment(par1, par2)),
});
*/

export default connect(mapStateToProps, mapDispatchToProps)(PhotoGrid)

https://redux.js.org/docs/api/bindActionCreators.html

1 Like