How to load data in Meteor app using Redux?

Introduction:

So, I struggle a lot with Redux. I think I understand the concept now. Essentially (and rather simplified):

  • Store , which contains all your relevant applications,
  • User interactions with the application can trigger Actions that have a descriptive title and some data payload.
  • The reducer uses the current state from Store and Actions to place the updated state in the repository (over the old state)

Now this is good, because you can connect components (even deep in the reaction tree) with the state and use the state as one source of truth (i.e. always know whether the user is registered or not).

My problem with this occurs when combining Redux with Meteor, and I still do not understand why and what information I would like to put in the Redux store in the Meteor application.


An example :

Say we have a collection of messages. Usually we just get through Minimongo and show the results to the user. Now let me say that we want our Redux store to be the only source of truth for storing all the data. Essentially, minimongo needs to sync with the Redux store. Presumably, an action will be sent to the DidMount component to load data into the storage.

store.dispatch({
  type: 'GET_POSTS',
  posts: Posts.find().fetch(),
}); 

Then it will be reduced to:

const postReducer = (state = [], action) => {
  switch (action.type) {
    case 'GET_POSTS':
      return action.posts;
    default:
      return state;
  }
};

, , Posts, ( , ):

Tracker.autorun(() => {
  store.dispatch({
    type: 'GET_POSTS',
    posts: Posts.find().fetch(),
  });
});

: Redux, , , - , + ( + ). , , .

+4
2

, : . ( ) , . . .

: , . Mongo Meteor Redux.

Update: - . 2 3. , createContainer. ( " " )

1. PostsList ( ):

class PostsList extends Component {
    render () {
        return (this.props.posts.map((post,i) => {return (<div key={i}>post.header</div>)})
    }
}

2. :

const PostsListContainer = createContainer((props) => {
    let posts = Meteor.subscribe('getPosts', props.filter);
    return {
        posts
    }
}, PostsList)

3. Redux:

const mapStateToProps = state => {return{filter: state.filter}}

const ConnectedComponent = connect(mapStateToProps,)(PostsListContainer)
+3

, ! React + Redux, Meteor. , !

, Redux. , , .

. , ( ) Redux:

  • ( , MongoDB , , , ). : Redux .
  • Meteor ( Meteor, , , ). , Redux (, ), , , , Redux , , , . (, , , , ). . Store , , , , .catch ( , ).

, Redux Meteor-React, . , , , .

, :

  • , , Redux React-Meteor. , (.. ). , .
  • : Redux React. Meteor . MongoDB Meteor, , , Redux. Redux, . , Meteor - .

, , . - / Meteor ( ), Redux Store (, ).

: toDos Meteor / . , . , Redux Store . , , , , Redux Store Redux .

+3

Source: https://habr.com/ru/post/1680250/


All Articles