reactjs - 从 URL 设置 redux 状态的好方法是什么? (我只关心一种方式 - 共享链接)

标签 reactjs react-router redux react-redux

我正在使用 React-Redux 创建一个单页计算器。想想简化的税收计算或抵押贷款计算,也许有十几个参数供用户控制和零路由(至少现在不是)。我希望用户能够与其他人分享他的计算,所以例如如果他点击“分享”按钮并向 Facebook 发帖,类似于 http://www.magiccalc.com?taxYear=2016&plannedIncome=60000&etc=etc单击该链接的任何人都会到达使用给定参数初始化的页面,甚至可能带有一些初始化动画。

什么是好的方法?

我现在正处于研究阶段,所以准备妥协。 Url 参数可以是状态值或某些 SET_VALUES 操作的参数,它们可以在 hashsign 之后,或者使用完整的路由器,它们也可以是 base64 或其他方式编码。

最诚挚的问候, 阿尔乔姆。

最佳答案

如果您的应用只有一个页面,我只需使用普通的 JavaScript 来解析 url 以获取参数值并将其设置为“componentWillMount”方法中的状态。

如果您的应用程序有多个页面(即路由)。这取决于您如何在应用程序中处理路由。对我来说,我使用 react-router-redux ,它提供了一种从 mapStateToProps 的第二个参数访问路由器的 props 的好方法。例如,假设您的网址是“http://myapp/?someParam=someValue”,您可以按如下方式获取“someParam”的值:

const mapStateToProps = ( state, ownProps ) => {
    return {
        someParamValue: ownProps.location.query.someParam,
    }
}

然后您可以将此“someParamValue”设置到您的应用程序状态中。我再次在“componentWillMount”方法中执行此操作。

componentWillMount() {
    this.props.urlParamActions.setParamValue(this.props.someParamValue);
}

如果你使用react-router,你可以这样做this

关于reactjs - 从 URL 设置 redux 状态的好方法是什么? (我只关心一种方式 - 共享链接),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37039555/

相关文章:

javascript - 如何从 package.json 设置 NODE_ENV 以进行 react

javascript - 复选框不改变 react native 元素

javascript - 如何在 react-redux-typescript 中传递 props

javascript - 如何更改 react 中导航栏标题的值?

reactjs - React 中的表单重置所有字段

javascript - 避免重复州名

reactjs - 将react-hook-form与@mui/x-date-pickers v6一起使用

reactjs - 是的,验证需要两个字段之一(其中一个是数字数组)

reactjs - 带有持久抽屉的 React 路由

javascript - 如何使用 react-router 将顶级组件状态向下传递给路由?