如何通过redux显示初始状态

问题描述 投票：1回答：3

我正在尝试从商店中显示我的初始状态。我知道我的代码不正确，但我希望为此学习最简单的方法。我可以简单地使用道具从商店接收数据吗？还是我需要一些生命周期事件来定位存储中的数据？

这是我目前的尝试：


//store .js

import { createStore, applyMiddleware,compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; //the index.js file

const initialState = 
    [
        {
            id:'0',
            propertyName: 'house',
            footage: '1800 sqft',
            address: '108 boogaloo dr. thisplace, CA',
            price: '$145,300.00'
        },
        {
            id: '1',
            propertyName: 'closet',
            footage: '110 sqft',
            address: '23 dirt dr. badplace, NC',
            price: '$3'
        },
        {
            id:'2',
            propertyName: 'garage',
            footage: '1000 sqft',
            address: '10 meadow st. decent, NY',
            price: '$100,000.00'
        },
        {
            id:'3',
            propertyName: 'fishing shack',
            footage: '500 sqft',
            address: '108 fishy dr. forestgrove, NJ',
            price: '$200,300.00'
        },
        {
            id:'4',
            propertyName: 'huge mansion',
            footage: '8000 sqft',
            address: '32 T-Pain st. onlytwentythree, WI',
            price: '$100.00'
        },
        {
            id:'5',
            propertyName: 'dog house',
            footage: '200 sqft',
            address: '2367 goodboy dr. borks, KA',
            price: '$1000.00'
        },
        {
            id:'6',
            propertyName: 'beehive',
            footage: 'too big to measure',
            address: '108 stingya dr. Bidibi, NJ',
            price: '$300.00'
        },
        {
            id:'7',
            propertyName: 'my house',
            footage: '4000 sqft',
            address: '42 treeface dr. bigwoods, FL',
            price: '$190,300.00'
        },
    ]


const middleware = [thunk]

const store = createStore(
    rootReducer, 
    initialState, 
    compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()
)
);

export default store;

建立商店后，我尝试使用名为Properties的组件（应该制作房地产属性的列表）呈现这些属性



import React, { Component } from 'react'
import PropTypes from 'prop-types';
import {connect} from 'react-redux';


 class Properties extends Component {

    render() {
        const properties = this.props.properties.map(property => (
            <div key = {property.id}>
                <h3>{property.propertyName}</h3>
                <div style={{width: '4em', height:'4em', backgroundColor: 'blue'}}>image</div>
                <p>{property.footage}</p>
                <p>{property.address}</p>
                <p>{property.price}</p>
            </div>
        ))
        return (
            <div>
                <h1>Current Listings</h1>
                    {properties}
            </div> 
        )
    }
}
Properties.propTypes = {
    properties:PropTypes.array.isRequired,
    newListing: PropTypes.object
}

const mapStateToProps = state =>({
    properties: state.posts.items,
    newListing: state.posts.item
});
export default connect(mapStateToProps,null)(Properties)

不幸的是：(由于没有渲染任何东西，我的道具似乎都没有出现。我没有与此相关的任何错误，我想知道我是否只是在功能上做错了吗？

reactjs redux react-redux react-props react-proptypes
3个回答
1
投票

您的一般方法总体上可行，但是需要进行某些更正：

  • 您的状态应该是一个对象（不是当前的数组）
  • 为了使整个对象数组显示为一堆React元素，您可能希望将它们包装到某些父组件中，并map()将您的各个帖子作为小组件接收到相应的对象作为父组件的道具

您可以查询以下现场演示作为参考：

//dependencies
const { render } = ReactDOM,
      { createStore } = Redux,
      { connect, Provider } = ReactRedux
      
//initial state, doomy reducer and basic store (no middleware)
const initialState = {posts:[{id:'0',propertyName:'house',footage:'1800 sqft',address:'108 boogaloo dr. thisplace, CA',price:'$145,300.00'},{id:'1',propertyName:'closet',footage:'110 sqft',address:'23 dirt dr. badplace, NC',price:'$3'},{id:'2',propertyName:'garage',footage:'1000 sqft',address:'10 meadow st. decent, NY',price:'$100,000.00'},{id:'3',propertyName:'fishing shack',footage:'500 sqft',address:'108 fishy dr. forestgrove, NJ',price:'$200,300.00'},{id:'4',propertyName:'huge mansion',footage:'8000 sqft',address:'32 T-Pain st. onlytwentythree, WI',price:'$100.00'},{id:'5',propertyName:'dog house',footage:'200 sqft',address:'2367 goodboy dr. borks, KA',price:'$1000.00'},{id:'6',propertyName:'beehive',footage:'too big to measure',address:'108 stingya dr. Bidibi, NJ',price:'$300.00'},{id:'7',propertyName:'my house',footage:'4000 sqft',address:'42 treeface dr. bigwoods, FL',price:'$190,300.00'},]},
      appReducer = (state=initialState, action) => state,
      store = createStore(appReducer)
//post ui component
const Post = ({propertyName, footage, address, price}) => (
  <div>
    <h3>{propertyName}</h3>
    <p>footage: {footage}</p>
    <p>address: {address}</p>
    <p>price: {price}</p>
  </div>
)
//wrapper ui component relying on storedPosts property
//that will get connected to global state posts later on
const PostBoard = ({storedPosts}) => (
  <div>
    {storedPosts.map((post, key) => <Post key={key} {...post} />)}
  </div>
)
//connect storedPosts to global state posts
const mapStateToProps = ({posts}) => ({storedPosts: posts}),
      PostBoardComponent = connect(mapStateToProps)(PostBoard)
//render Redux Provider
render (
  <Provider store={store}>
    <PostBoardComponent />
  </Provider>,
  document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.1.3/react-redux.min.js"></script><div id="root"></div>
3
投票

使用生命周期方法更新组件

像shouldComponentUpdate方法，

道具更改不会仅导致状态更改，而是状态更改会导致重新渲染，在这种情况下将道具存储为状态也是一种解决方案（不合适）

1
投票

在redux中，您将在reducer中定义一个初始状态，并将使用操作对状态中的数据进行一些更新或删除，并将进行存储（即您正在更新对象，则初始状态对象将被更新。）在少数情况下您直接需要初始状态。因此，您需要复制初始状态对象并对其执行任务。当新对象更新时，初始状态将不起作用。

您可以通过直接从组件（例如mapdispatchtoProps）调度动作来使用组件进行更新。>>

您可以通过连接来访问组件中的整个商店数据，即connect（mapStatetoProps，mapDispacthtoProps）。

mapSatettoProps将使您将数据存储为状态。您可以修改它，也可以做任何您想做的事情。状态访问也可以在组件中完成，但是您将获得更新。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.