1.Can someone help me where i made a thing wrong?
2.the component i am mapping the state to its properties but i still get this
error"mapStateToProps is not defined"
this is the whole component below. the error reads "mapStateToProps not defined"
import React, {Component} from 'react';
import Icon from 'react-native-vector-icons/EvilIcons';
import { loadInitialPosts} from './actions';
import {connect } from 'react-redux';
import _ from 'lodash';
import {View, StyleSheet,FlatList} from 'react-native';
import PostItem from './PostItem';
import PostDetail from './PostDetail';
class PostsList extends Component {
componentWillMount() {
this.props.loadInitialPosts();
}
renderItem({item}){
return <PostItem posts = { item } />;
}
renderInitialView(){
if(this.props.postDetailView === true){
return(
<PostDetail />
);
}
else{
return(
<FlatList
data={this.props.posts}
renderItem={this.renderItem} />
)}
}
render(){
return(
<View style={styles.list}>
{this.renderInitialView()}
</View>
);
}
}
const mapStateToProps = state => {
const posts = _.map(state.posts, (val, id) =>
{
return { ...val, id};
});
return{
posts: posts,
postDetailView: state.postDetailView,
};
}
export default connect(mapStateToProps, { loadInitialPosts })(PostsList)
1.This is the action that dispatches the data
export const loadInitialPosts = () => {
return function(dispatch){
return axios.get(apiHost
+"/api/get_posts?
count=20")
.then((response) => {
dispatch({ type:
'INITIAL_POSTS_FETCH', payload:
response.data.posts});
}).catch((err) => {
console.log(err);
});
};
};
mapStateToProps sits outside of the class before export default connect(mapStateToProps)(SomeClass)
class SomeClass extends React.Component {
...
}
const mapStateToProps = state => {
const posts = _.map(state.posts, (val, id) => {
return { ...val,
id
};
});
return {
posts: posts,
postDetailView: state.postDetailView,
};
}
To eliminate the possibility of mapStateToProps being undefined, consider defining the mapStateToProps directly in the call to connect() like this:
class PostsList extends React.Component {
componentWillMount() {
this.props.loadInitialPosts();
}
renderItem({item}){
return <PostItem posts = { item } />;
}
renderInitialView(){
if(this.props.postDetailView === true){
return <PostDetail />;
}
else{
return <FlatList
data={this.props.posts}
renderItem={this.renderItem} />
}
}
render(){
return(<View style={styles.list}> {this.renderInitialView()} </View>);
}
}
/*
Avoid declaration of mapStateToProps object by defining this object
directly in the call to connect()
*/
export default connect((state => {
return {
posts : state.posts.map((val, id) => ({ ...val, id })),
postDetailView: state.postDetailView,
}
}), { loadInitialPosts })(PostsList)
Related
I'm fairly new to redux. I'm taking an E-Commerce site tutorial using React and Redux.
I have a CollectionItem Component that has a button that calls an addItem function which adds the specified item to the shopping Cart.
The addItem function works for CollectionItems Component generated from CollectionPreview however it doesnt work for CollectionItems Components generated from Collections. Whenever the button is clicked i get a TypeError: addItem is not a function.
find codes below
CollectionItem Component
import React from "react";
import "./collection.item.style.scss";
import CustomButton from "../custom-button/custom.button.component";
import { connect } from "react-redux";
import { addItem } from "../../redux/cart/cart.action";
export const CollectionItem = ({ item, addItem }) => {
const { name, imageUrl, price } = item;
return (
<div className="CollectionItem">
<div
className="Image"
style={{
backgroundImage: `url(${imageUrl})`
}}
/>
<div className="footer">
<span className="ItemName">{name}</span>
<span className="ItemPrice">#{price}</span>
</div>
<CustomButton onClick={() => addItem(item)} color="outline-dark">
Add to Cart
</CustomButton>
</div>
);
};
const mapDispatchtoProps = dispatch => ({
addItem: item => dispatch(addItem(item))
});
export default connect(null, mapDispatchtoProps)(CollectionItem);
CollectionPreview Component
import React, { Component } from "react";
import CollectionItem from "../collection.item/collection.item.component";
import "./collection.preview.style.scss";
class Preview extends Component {
render() {
const { title, items } = this.props;
return (
<div className="CollectionPreview">
<h1 className="CollectionTitle">{title}</h1>
<div className="Preview">
{items
.filter((item, index) => index < 4)
.map(item => (
<CollectionItem key={item.id} item={item} />
))}
</div>
</div>
);
}
}
export default Preview;
Collection Component
import React, { Component } from "react";
import "./collection.style.scss";
import { connect } from "react-redux";
import { selectCollection } from "../../redux/shop/shop.selector";
import { CollectionItem } from "../collection.item/collection.item.component";
class Collection extends Component {
render() {
const { title, items } = this.props.collections;
return (
<div className="collection-page">
<h2 className="title"> {title}</h2>
<div className="container items">
{items.map(item => (
<CollectionItem key={item.id} item={item} />
))}
</div>
</div>
);
}
}
const mapPropsToState = (state, ownProps) => ({
collections: selectCollection(ownProps.match.params.collectionId)(state)
});
export default connect(mapPropsToState)(Collection);
Redux Cart Action
import { TOGGLE_CART } from "./cart.types";
import { ADD_ITEMS } from "./cart.types";
import { DELETE_ITEMS } from "./cart.types";
import { INCREASE_QUANTITY } from "./cart.types";
import { DECREASE_QUANTITY } from "./cart.types";
export const toggleCart = () => {
return {
type: TOGGLE_CART
};
};
export const addItem = item => {
return {
type: ADD_ITEMS,
payload: item
};
};
export const deleteItem = item => {
return {
type: DELETE_ITEMS,
payload: item
};
};
export const increaseItem = item => {
return {
type: INCREASE_QUANTITY,
payload: item
};
};
export const decreaseItem = item => {
return {
type: DECREASE_QUANTITY,
payload: item
};
};
Cart Reducer
import { TOGGLE_CART } from "./cart.types";
import { ADD_ITEMS } from "./cart.types";
import { addItemToCart } from "./cart.utils";
import { DELETE_ITEMS } from "./cart.types";
import { deleteItemFromCart } from "./cart.utils";
import { increaseCartItem } from "./cart.utils";
import { decreaseCartItem } from "./cart.utils";
import { DECREASE_QUANTITY } from "./cart.types";
import { INCREASE_QUANTITY } from "./cart.types";
const initialState = {
showCart: false,
cartItems: []
};
const cartReducer = (state = initialState, action) => {
switch (action.type) {
case TOGGLE_CART:
return {
...state,
showCart: !state.showCart
};
case ADD_ITEMS:
return {
...state,
cartItems: addItemToCart(state.cartItems, action.payload)
};
case DELETE_ITEMS:
return {
...state,
cartItems: deleteItemFromCart(state.cartItems, action.payload)
};
case INCREASE_QUANTITY:
return {
...state,
cartItems: increaseCartItem(state.cartItems, action.payload)
};
case DECREASE_QUANTITY:
return {
...state,
cartItems: decreaseCartItem(state.cartItems, action.payload)
};
default:
return state;
}
};
export default cartReducer;
Just check your imports, in your Preview component, you use the default import and a named import in your Collection
Thus, in your Collection component, you get a not redux-connected version, so you don’t have access to the props passed in the mapStateToProps.
Just replace import { CollectionItem } with import CollectionItem
I want to push state to the browser and append to the pathname when a subreddit has changed.
In the example below the user chooses an option from ['reactjs', 'frontend']. So when the user chooses reactjs, I want to changethe browser url to: <url>/reddit/reactjs or <url>/reddit/frontend based on the selection.
So when the user goes back and forward, I want to show data that was already fetched.
How can I make it work with react-redux for the example below? Normally, I was using history.pushState(...).
Note: I am using connected-react-router
index.js:
import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import Root from './containers/Root'
render(<Root />, document.getElementById('root'))
action.js:
import fetch from 'cross-fetch'
export const REQUEST_POSTS = 'REQUEST_POSTS'
export const RECEIVE_POSTS = 'RECEIVE_POSTS'
export const SELECT_SUBREDDIT = 'SELECT_SUBREDDIT'
export const INVALIDATE_SUBREDDIT = 'INVALIDATE_SUBREDDIT'
export function selectSubreddit(subreddit) {
return {
type: SELECT_SUBREDDIT,
subreddit
}
}
export function invalidateSubreddit(subreddit) {
return {
type: INVALIDATE_SUBREDDIT,
subreddit
}
}
function requestPosts(subreddit) {
return {
type: REQUEST_POSTS,
subreddit
}
}
function receivePosts(subreddit, json) {
return {
type: RECEIVE_POSTS,
subreddit,
posts: json.data.children.map(child => child.data),
receivedAt: Date.now()
}
}
function fetchPosts(subreddit) {
return dispatch => {
dispatch(requestPosts(subreddit))
return fetch(`https://www.reddit.com/r/${subreddit}.json`)
.then(response => response.json())
.then(json => dispatch(receivePosts(subreddit, json)))
}
}
function shouldFetchPosts(state, subreddit) {
const posts = state.postsBySubreddit[subreddit]
if (!posts) {
return true
} else if (posts.isFetching) {
return false
} else {
return posts.didInvalidate
}
}
export function fetchPostsIfNeeded(subreddit) {
return (dispatch, getState) => {
if (shouldFetchPosts(getState(), subreddit)) {
return dispatch(fetchPosts(subreddit))
}
}
}
reducers.js:
import { combineReducers } from 'redux'
import {
SELECT_SUBREDDIT,
INVALIDATE_SUBREDDIT,
REQUEST_POSTS,
RECEIVE_POSTS
} from './actions'
function selectedSubreddit(state = 'reactjs', action) {
switch (action.type) {
case SELECT_SUBREDDIT:
return action.subreddit
default:
return state
}
}
function posts(
state = {
isFetching: false,
didInvalidate: false,
items: []
},
action
) {
switch (action.type) {
case INVALIDATE_SUBREDDIT:
return Object.assign({}, state, {
didInvalidate: true
})
case REQUEST_POSTS:
return Object.assign({}, state, {
isFetching: true,
didInvalidate: false
})
case RECEIVE_POSTS:
return Object.assign({}, state, {
isFetching: false,
didInvalidate: false,
items: action.posts,
lastUpdated: action.receivedAt
})
default:
return state
}
}
function postsBySubreddit(state = {}, action) {
switch (action.type) {
case INVALIDATE_SUBREDDIT:
case RECEIVE_POSTS:
case REQUEST_POSTS:
return Object.assign({}, state, {
[action.subreddit]: posts(state[action.subreddit], action)
})
default:
return state
}
}
const rootReducer = combineReducers({
postsBySubreddit,
selectedSubreddit
})
export default rootReducer
configureStore.js
import { createStore, compose, applyMiddleware } from 'redux'
import { createBrowserHistory } from 'history'
import { routerMiddleware } from 'connected-react-router'
import thunkMiddleware from 'redux-thunk'
import logger from 'redux-logger'
import rootReducer from '../reducers'
// const loggerMiddleware = createLogger()
export const history = createBrowserHistory()
export default function configureStore(preloadedState?: any) {
const store = createStore(
rootReducer(history), // root reducer with router state
preloadedState,
compose(
applyMiddleware(
thunkMiddleware,
logger,
routerMiddleware(history), // for dispatching history actions
// ... other middlewares ...
),
),
)
return store
}
Root.js
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import configureStore from '../configureStore'
import AsyncApp from './AsyncApp'
const store = configureStore()
export default class Root extends Component {
render() {
return (
<Provider store={store}>
<AsyncApp />
</Provider>
)
}
}
AsnycApp.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import {
selectSubreddit,
fetchPostsIfNeeded,
invalidateSubreddit
} from '../actions'
import Picker from '../components/Picker'
import Posts from '../components/Posts'
class AsyncApp extends Component {
constructor(props) {
super(props)
this.handleChange = this.handleChange.bind(this)
this.handleRefreshClick = this.handleRefreshClick.bind(this)
}
componentDidMount() {
const { dispatch, selectedSubreddit } = this.props
dispatch(fetchPostsIfNeeded(selectedSubreddit))
}
componentDidUpdate(prevProps) {
if (this.props.selectedSubreddit !== prevProps.selectedSubreddit) {
const { dispatch, selectedSubreddit } = this.props
dispatch(fetchPostsIfNeeded(selectedSubreddit))
}
}
handleChange(nextSubreddit) {
this.props.dispatch(selectSubreddit(nextSubreddit))
this.props.dispatch(fetchPostsIfNeeded(nextSubreddit))
}
handleRefreshClick(e) {
e.preventDefault()
const { dispatch, selectedSubreddit } = this.props
dispatch(invalidateSubreddit(selectedSubreddit))
dispatch(fetchPostsIfNeeded(selectedSubreddit))
}
render() {
const { selectedSubreddit, posts, isFetching, lastUpdated } = this.props
return (
<div>
<Picker
value={selectedSubreddit}
onChange={this.handleChange}
options={['reactjs', 'frontend']}
/>
<p>
{lastUpdated && (
<span>
Last updated at {new Date(lastUpdated).toLocaleTimeString()}.{' '}
</span>
)}
{!isFetching && (
<button onClick={this.handleRefreshClick}>Refresh</button>
)}
</p>
{isFetching && posts.length === 0 && <h2>Loading...</h2>}
{!isFetching && posts.length === 0 && <h2>Empty.</h2>}
{posts.length > 0 && (
<div style={{ opacity: isFetching ? 0.5 : 1 }}>
<Posts posts={posts} />
</div>
)}
</div>
)
}
}
AsyncApp.propTypes = {
selectedSubreddit: PropTypes.string.isRequired,
posts: PropTypes.array.isRequired,
isFetching: PropTypes.bool.isRequired,
lastUpdated: PropTypes.number,
dispatch: PropTypes.func.isRequired
}
function mapStateToProps(state) {
const { selectedSubreddit, postsBySubreddit } = state
const { isFetching, lastUpdated, items: posts } = postsBySubreddit[
selectedSubreddit
] || {
isFetching: true,
items: []
}
return {
selectedSubreddit,
posts,
isFetching,
lastUpdated
}
}
export default connect(mapStateToProps)(AsyncApp)
Picker.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class Picker extends Component {
render() {
const { value, onChange, options } = this.props
return (
<span>
<h1>{value}</h1>
<select onChange={e => onChange(e.target.value)} value={value}>
{options.map(option => (
<option value={option} key={option}>
{option}
</option>
))}
</select>
</span>
)
}
}
Picker.propTypes = {
options: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired
}
Posts.js:
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class Posts extends Component {
render() {
return (
<ul>
{this.props.posts.map((post, i) => (
<li key={i}>{post.title}</li>
))}
</ul>
)
}
}
Posts.propTypes = {
posts: PropTypes.array.isRequired
}
Update:
import { push } from 'connected-react-router';
...
handleChange(nextSubreddit) {
this.props.dispatch(push('/reddit/' + nextSubreddit))
}
I placed this in the handleChange() method. When Picker changes, I push the state to the browser. However, when I go back and forward, the data does not change according to this url. I see the same data in every state.
We can handle this scenario using history property. We implement using listener of history and play with the location property which in turn provide pathname. It would be implement in componentDidUpdate. Everytime when back and forward button of browser clicked, the listener will called and service calls and state can be changed accordingly.
AsyncApp.js
// code here
import { history } from '../configureStore'
// code here
componentDidUpdate(prevProps) {
if (this.props.selectedSubreddit !== prevProps.selectedSubreddit) {
const backBrowser = history.listen(location => {
console.log(location.pathname)
// code here
}
// code here
}
}
I've asked a similar-ish question here before, however my code has changed quite a bit and I can not figure this out. I am certain it's an issue with what I am passing to my action/reducer. I would seriously appreciate it if someone could explain what I am doing wrong here. I really want to get this, just having a hard time with it.
actions.js
import { ADD_TODO, REMOVE_TODO } from '../constants/action-types';
export const addTodo = (todo) => (
{
type: ADD_TODO,
payload: todo
}
);
export const removeTodo = (id) => (
{
type: REMOVE_TODO,
payload: id
}
)
reducers.js
import { ADD_TODO, REMOVE_TODO, ADD_OPTIONS } from '../constants/action-types';
import uuidv1 from 'uuid';
const initialState = {
todos: []
};
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TODO:
return {
...state,
todos: [...state.todos,
{
title: action.payload.inputValue,
id: uuidv1(),
createdAt: Date(),
priority: '',
deadline: '',
isClicked: false
}]
}
case REMOVE_TODO:
return {
...state,
todos: [...state.todos.filter(todo => todo.id !== action.payload)]
}
case ADD_OPTIONS:
return {
...state,
todos: [...state.todos,
{
isClicked: false
}]
}
default:
return state;
}
}
export default rootReducer;
TodoList.js
import React, { Component } from 'react';
import TodoItem from './TodoItem';
import { removeTodo } from '../actions';
import { connect } from 'react-redux';
const mapDispatchToProps = dispatch => {
return {
removeTodo: id => dispatch(removeTodo(id))
};
};
const mapStateToProps = state => {
return {todos: [...state.todos]};
};
class List extends Component {
render() {
const mappedTodos = this.props.todos.map((todo, index) => (
<TodoItem
title={todo.title}
key={index}
removeTodo={this.props.removeTodo}
/>
));
return (
mappedTodos
);
}
}
const TodoList = connect(mapStateToProps, mapDispatchToProps) (List)
export default TodoList;
TodoItem.js
import React, { Component } from 'react';
import uuid from 'uuid';
import '../../css/Todo.css';
class TodoItem extends Component {
render() {
const todoId = uuid();
return (
<div id={todoId}>
{this.props.title}
<button onClick={this.props.removeTodo}>X</button>
</div>
);
}
}
export default TodoItem;
You need to wrap your remove handler in an expression that can be evaluated at "click time" and use the todo id from the closure:
class TodoItem extends Component {
render() {
const todoId = uuid();
return (
<div id={todoId}>
{this.props.title}
<button onClick={this.props.removeTodo}>X</button>
</div>
);
}
}
Should be something like...
class TodoItem extends Component {
render() {
const todoId = uuid();
return (
<div id={todoId}>
{this.props.title}
<button onClick={() => this.props.removeTodo(todoId)}>X</button>
</div>
);
}
}
Along the lines of what #The Dembinski was saying, it works when I change my TodoList component to look like this:
import React, { Component } from 'react';
import TodoItem from './TodoItem';
import { removeTodo } from '../actions';
import { connect } from 'react-redux';
const mapDispatchToProps = dispatch => {
return {
removeTodo: id => dispatch(removeTodo(id))
};
};
const mapStateToProps = state => {
return {todos: [...state.todos]};
};
class List extends Component {
render() {
const mappedTodos = this.props.todos.map((todo, index) => (
<TodoItem
title={todo.title}
key={index}
removeTodo={() => this.props.removeTodo(todo.id)}
/>
));
return (
mappedTodos
);
}
}
const TodoList = connect(mapStateToProps, mapDispatchToProps) (List)
export default TodoList;
Changing my removeTodo prop in the map here DID fix the issue and now deletes properly. However, if anyone could help me understand this better either by further discussion, or just by pointing my in the right direction as to what I should be researching. Would be greatly appreciated. I'm not after answers, I'm after learning.
Here is my store:
import helper from './../../helpers/RestHelpers.js';
var posts = [];
class PostStore {
constructor() {
helper.get('/api/posts')
.then((data) => {
posts = data;
console.log(posts);
}
);
}
getPosts() {
return posts;
}
};
export default new PostStore();
When I console.log posts from within the helper function, I get the correct data. But when I console.log from the component, the array of posts is empty.
Here is my component:
import React from 'react';
import postStore from '../stores/PostStore';
class Home extends React.Component {
constructor() {
super();
this.state = {
posts: postStore.getPosts()
}
console.log(this.state.posts);
}
render() {
return (
<div className="welcome">
{this.state.posts.map(function(post, index) {
return (
<PostItem post={post} key={"post " + index} />
)
})
}
</div>
)
}
}
class PostItem extends React.Component {
render() {
return <div>{this.props.post.postName}</div>;
}
}
export default Home;
I wouldn't use your PostStore as-is. Instead just use your helper directly like so:
import React from 'react';
// import your helper!
class Home extends React.Component {
componentDidMount() {
helper.get('/api/posts').then((data) => {
this.setState({posts: data})
});
}
render() {
return (
<div className="welcome">
{this.state.posts.map((post, idx) => <PostItem post={post} key={"post " + idx} />)}
</div>
)
}
}
I'm beginner in react and redux, I have action which posts JSON on API and then receives list, this action called from button click, this all process works good but after populating data ui is not updating
Action:
import * as types from './actionTypes'
import { postMessage } from '../api/messaging'
function postToAPI(msg, dispatch) {
dispatch({ type: types.MESSAGE_POSTING });
postMessage(msg, (messages) => {
dispatch({
type: types.MESSAGE_POST_DONE,
messages: messages
});
});
}
export function postMessageAction(msg) {
return (dispatch) => {
postToAPI(msg, dispatch);
}
}
Reducer:
import * as types from '../actions/actionTypes'
const initialState = {
messages: []
}
export default function messages(state = initialState, action) {
switch(action.type) {
case types.MESSAGE_POST_DONE:
return {
...state,
messages: action.messages
}
this.forceUpdate();
default:
return state;
}
}
Main container:
export default class App extends Component {
render() {
return (
<Provider store={store}>
<CounterApp />
</Provider>
);
}
}
CounterApp:
class CounterApp extends Component {
constructor(props) {
super(props);
}
render() {
const { state, actions } = this.props;
return (
<Messaging />
);
}
}
export default connect(state => ({
messages: state.default.messages.messages
}))(CounterApp);
Messaging:
class Messaging extends Component {
render() {
return (
<View>
<MessageList messages={this.props.messages} />
<Message />
</View>
)
}
}
export default connect(state => ({
messages: state.default.messages.messages
}))(Messaging);
Message list:
export default class MessageList extends Component {
constructor(props) {
super(props);
}
render() {
return (
<ScrollView>
{
this.props.messages.map((item, index) => {
return (
<Text>
{ item.body }
</Text>
)
})
}
</ScrollView>
)
}
}
My MessageList component does not updates when messages changed. I read difference between props and state but i dont know how to pass data to state.
Update:
My state in messaging connect looks like this why i used default
Any ideas?
Your code looks strange. Firstly you need to connect to redux only in one component "Messaging"
import { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
const mapStateToProps = state => ({
messages: state.messages.messages
});
#connect(mapStateToProps);
class Messaging extends Component {
static propTypes = {
messages: PropTypes.object
}
render() {
const { messages } = this.props;
return (
<View>
<MessageList messages={messages} />
<Message />
</View>
)
}
}
Then use MessageList like dumb component to receive and render data.
export default class MessageList extends Component {
constructor(props) {
super(props);
}
renderMessages(item, index) {
return <Text>{item.body}</Text>;
}
render() {
const { messages } = this.props;
return (
<ScrollView>
{messages.map((item, index) => this.renderMessages(item, index))}
</ScrollView>
);
}
}
At a guess I'd say your connect statement wants to be
messages: state.messages
rather than
messages: state.default.messages.messages.
Also from what I can see I don't think you need the connect statement in CounterApp, it's not doing anything.
I'm not sure if the returned messages should replace or be merged with the existing messages but your reducer should be either
case types.MESSAGE_POST_DONE:
return {
messages: action.messages
}
if it's replacing the existing list or
case types.MESSAGE_POST_DONE:
return {
messages: [...state.messages, ...action.messages]
}
if you want to merge them.
A few things I noticed are:
From what I can see there's no default object in the state (you wrote messages: state.default.messages.messages).
You shouldn't use forceUpdate() in your reducer.
While it won't break anything, the CounterApp component is using connect without using any of the props.
Try this instead:
Reducer:
import * as types from '../actions/actionTypes'
const initialState = {
messages: []
}
export default function messages(state = initialState, action) {
switch(action.type) {
case types.MESSAGE_POST_DONE:
return {
...state,
messages: action.messages
}
default:
return state;
}
}
CounterApp:
class CounterApp extends Component {
render() {
return (
<Messaging />
);
}
}
Messaging:
class Messaging extends Component {
render() {
return (
<View>
<MessageList messages={this.props.messages} />
<Message />
</View>
)
}
}
export default connect(state => ({
messages: state.messages.messages
}))(Messaging);