Question

我的redux商店中有这些数据：

data: [
    0: {
        name: "Mark Zuckerburg",
        description: "Facebook CEO"
    },
    1: {
        name: "Sheryl Sandberg",
        description: "Facebook COO"
    },
    2: {

    }
]

这是我在reducer中的代码：

// This is how I store my data lists
case GET_HEROES_SUCCESS: {
            return Object.assign({}, state.data, {
                data: action.data
            });
        }
// This is how I fetch currently the single object in the data lists.
case FETCH_HEROES_REDUX_STORE: {
            return { ...state, data: state.data[action.id] }
        }

我现在的问题是，如果我发送FETCH_HEROES_REDUX_STORE它会覆盖我商店中的整个数据列表。如何通过不覆盖整个数据存储，仅返回action.id上的单个数据对象。

谢谢！

Answer 1

在Redux中，操作用于更新和修改状态。它们通常不用于获取数据。这是因为reducer返回的任何对象都将作为新的Redux状态取代，这就是FETCH_HEROES_REDUX_STORE覆盖数据列表的原因。

要从Redux中的嵌套数据中获取单个对象，您希望使用Provider react-redux组件将Redux存储传递给React组件。我建议您查看Redux文档以更好地理解Redux中的数据流：http://redux.js.org/docs/basics/UsageWithReact.html。

在最顶级的组件中，执行以下操作将React组件连接到Redux存储。这使得Redux存储可用于React应用程序中的所有Container组件。

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

然后，要将Redux状态树传递给React组件，请将Container组件连接到Redux。注意：您希望在React应用程序中的某处呈现此容器组件。

import { connect } from 'react-redux'
import ReactComponent from './react_component' // import a React component

const mapStateToProps = (state) => {
  return {
    heroes: state.data // this will return the heroes data directly into your React components so you don't need to fetch it
  }
}

export default connect(mapStateToProps)(ReactComponent) // decorate React component with Redux state

最后，在React组件中从Redux状态访问单个对象：

import React from 'react';

const ReactComponent = ({ heroes }) => {

  console.log(heroes) // will log the redux state tree

  const markZuckerburg = heroes.data[0] // will log {name: "Mark Zuckerburg", description: "Facebook CEO"}
  const sherylSandberg = heroes.data[1] // will log {name: "Sheryl Sandberg", description: "Facebook COO"}

  return (
    <div> {markZuckerburg.name} </div>
    <div> {sherylSandberg.name} </div>
  )
}

export default React Component

Answer 2

您可以使用带有useSelector钩子的钩子从Redux中获取数据。

由“ todos”数组组成的redux状态示例，该数组获取一个：

import React from 'react'
import { useSelector } from 'react-redux'

export const TodoListItem = props => {
  const todo = useSelector(state => state.todos[props.id])
  return <div>{todo.text}</div>
}

从redux中的嵌套数据中获取单个对象 - Reactjs

2 个答案: