如何将有效负载传递给选择器？反应 + 还原

Question

我想要的是一个参数化的getter。可以说我在 redux 用户中有模块并且每个用户都有 ID，我想通过传递 id return 这个用户。我的主要问题是如何将 id 从组件本身传递给 mapStateToProps ？

这是组件：

const Main = (props) => {
    console.log(props.userNameById(3)) // that's what I want pass an ID and get user
    return <div>Hello</div>
}
// that's what I googled that inside props you should receive parameter, but how do I pass it ?

const mapStateToProps = (state, props) => { 
    console.log(props) // empty object
    return {
         userNameById: getName(state, props)
     }
}
export default connect(mapStateToProps, null)(Main)

然后是我的 rootReducer（我知道这对问题并不重要，但以防万一）：

import { combineReducers } from "redux";
import { createSelector  } from "reselect";
import usersReducer, * as fromUsers from "./users/usersReducers";
import alertReducer from "./alerts/alertsReducers";


const rootReducer = combineReducers({
    users: usersReducer,
    alerts: alertReducer,
})

export const getName = (state, id) => return id; // let's just simplify a code, the main question how do I pass id

export default rootReducer;

Answer 1

mapStateToProps 应该是 return 一个状态而不是一个提取状态的函数。

如果你想在你的组件中提取你的状态，你可以 return 用户比在组件中找到一些值：

const Main = (props) => {
  console.log(props.users.find(user => user.id === 3))
  console.log(getName(props.users, 3)) // or if you want to use some helper function directly
  return <div>Hello</div>
}

const mapStateToProps = ({ users }) => ({ users })
export default connect(mapStateToProps, null)(Main)

但是如果您希望从 props 接收 id，您也可以在 mapStateToProps 中使用 id props:

const Main = (props) => {
  console.log(props.user)
  return <div>Hello</div>
}

const mapStateToProps = ({ users }, { id }) => ({ user: users.find(user => user.id === id) })
export default connect(mapStateToProps, null)(Main)

如何将有效负载传递给选择器？反应 + 还原

How do I pass payload to selector? react + redux

getter

selector

reactjs

redux