How to use remx - 10 common examples

//     title: 'Post 1',
  //     text: 'Post 1 text',
  //     img: 'https://picsum.photos/200/200/?image=977'
  //   },
  //   {
  //     id: 2,
  //     title: 'Post 2',
  //     text: 'Post 2 text',
  //     img: 'https://picsum.photos/200/200/?image=1'
  //   }
  // ]
};

const state = remx.state(initialState);

const getters = remx.getters({
  getPosts() {
    return state.posts;
  },

  getPost(id) {
    const post = _find(state.posts, {id})
    return post;
  }
});

const setters = remx.setters({
  setPosts(posts) {
    state.posts = posts;
  },

  addPost(post) {

};

const state = remx.state(initialState);

const getters = remx.getters({
  getPosts() {
    return state.posts;
  },

  getPost(id) {
    const post = _find(state.posts, {id})
    return post;
  }
});

const setters = remx.setters({
  setPosts(posts) {
    state.posts = posts;
  },

  addPost(post) {
    state.posts = [...state.posts, post];
  },

  updatePost(post) {
    state.posts = state.posts.map(item => {
      if (item.id !== post.id) {
        // This isn't the post we care about - keep it as-is
        return item
      }
      // Otherwise, this is the one we want - return an updated value
      return {

//   {
  //     id: 1,
  //     title: 'Post 1',
  //     text: 'Post 1 text',
  //     img: 'https://picsum.photos/200/200/?image=977'
  //   },
  //   {
  //     id: 2,
  //     title: 'Post 2',
  //     text: 'Post 2 text',
  //     img: 'https://picsum.photos/200/200/?image=1'
  //   }
  // ]
};

const state = remx.state(initialState);

const getters = remx.getters({
  getPosts() {
    return state.posts;
  },

  getPost(id) {
    const post = _find(state.posts, {id})
    return post;
  }
});

const setters = remx.setters({
  setPosts(posts) {
    state.posts = posts;
  },

}

// which props do we want to inject, given the global store state?
// always use selectors here and avoid accessing the state directly
//function mapStateToProps(state) {
//  const [postsById, postsIdArray] = postsSelectors.getPosts(state);
//  return {
//    postsById,
//    postsIdArray,
//    topicsByUrl: topicsSelectors.getSelectedTopicsByUrl(state),
//    currentFilter: postsSelectors.getCurrentFilter(state),
//    currentPost: postsSelectors.getCurrentPost(state)
//  };
//}

export default connect(PostsScreen);

data={this.props.posts}
        testID="posts-list"
        keyExtractor={this.postKeyExtractor}
        renderItem={this.renderItem}
      />
    );
  }
}

function mapStateToProps() {
  return {
    posts: postsStore.getPosts()
  };
}

export default connect(mapStateToProps)(PostsList);

const styles = StyleSheet.create({
  image: {
    width: 54,
    height: 54,
    borderRadius: BorderRadiuses.br20,
    marginHorizontal: 14,
    backgroundColor: Colors.purple70
  },
  border: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: Colors.dark60,
  }
});

renderText(txt) {
    return (
      
    );
  }
}

function mapStateToProps() {
  return {
    name: store.getters.getName(),
    age: store.getters.getAge()
  };
}

module.exports = connect(mapStateToProps)(MyComponent);

import { AddPackingItem } from "packlist-components";
import { connect } from "remx";

import { store } from '../remx/store';

function mapStateToProps(ownProps) {
  return {
    value: store.getNewItemText(),
    
    setNewItemText: (e) => store.setNewItemText(e.target.value),
    addItem: store.addItem,
    clear: store.clear
  };
}

export default connect(mapStateToProps)(AddPackingItem);

bg-red70
          fullWidth
          onPress={this.onPostDeletePressed}
        />
      
    );
  }
}

function mapStateToProps(props) {
  return {
    post: postsStore.getPost(props.postId)
  };
}

export default connect(mapStateToProps)(ViewPost);

import { SimpleList } from "packlist-components";
import { connect } from "remx";

import { store } from '../remx/store';

function mapStateToProps(ownProps) {
  return {
    value: store.getItems()
  };
}

export default connect(mapStateToProps)(SimpleList);

const setters = remx.setters({
  setNewItemText(txt) {
    state.newItemText = txt;
  },

  addItem() {
    state.myItems = state.myItems.concat(getters.getNewItemText());
    state.newItemText = '';
  },

  clear() {
    state.myItems = [];
  }
});

const getters = remx.getters({
  getItems() {
    return state.myItems;
  },

  getNewItemText() {
    return state.newItemText || '';
  }
});

export const store = {
  ...getters,
  ...setters
};