标签: react-redux

我在本例中使用react-redux和redux-saga进行API调用.我的目标是使用不同的URL进行另一个API调用,并在不同的页面中使用它们.怎么实现呢？

传奇故事:

import { take, put,call } from 'redux-saga/effects';
import { takeEvery, delay ,takeLatest} from 'redux-saga';
function fetchData() {
    return  fetch("https://api.github.com/repos/vmg/redcarpet/issues?state=closed")
    .then(res => res.json() )
    .then(data => ({ data }) )
    .catch(ex => {
        console.log('parsing failed', ex);
        return ({ ex });
    });
}
function* yourSaga(action) {
    const { data, ex } = yield call(fetchData);
    if (data)
    yield put({ type: 'REQUEST_DONE', data });
    else
    yield put({ type: 'REQUEST_FAILED', ex });
}
export default function* watchAsync() {
    yield* takeLatest('BLAH', yourSaga); …

如果我们通过使用调度连接到操作,有两种方式: -

1. this.props.dispatch(requestEmployees());

2. const mapDispatchToProps = (dispatch) => ({
      requestEmployees: () => dispatch(requestEmployees())

    });

如果我们在bindActionCreators的帮助下做同样的事情,那么我们的代码将是: -

function matchDispatchToProps(dispatch) {
        return bindActionCreators({ editLabResult: requestEmployees}, dispatch);
    }

现在我的问题是,我应该使用dispatch还是 bindActionCreators？他们之间有什么区别？

我有redux形式有下拉列表和文本字段.在下拉列表更改时,我必须更新其他字段.其他字段使用自定义组件示例

所以结构就像.1.具有形式2的组件.字段组件.

现在我用谷歌搜索,发现很少的东西来更新该领域,但无法做到这一点.我尝试了什么1.在字段中添加状态,如下面的值.不行.

<Field name="accountno" value="this.state.accountno" component={InputText} placeholder="Number" />

2. 尝试调度但不能使用它.没有派遣的错误我支持类型

   this.props.dispatch(change('form','accountno','test value'));

3. 尝试过this.props.fields,但同样不是道具类型中的字段.

它应该使用2或3但不能找到添加它们的位置.请告诉我如何使用这些或任何其他方式.

我是反应/减少的新相对论.因为我想问一个(也许是一个哲学的)问题.

可以在componentDidMount反应组件上调度动作(例如触发api调用)吗？

如果没有,我为什么要在哪里发布行动？

如果是,那么没有其他问题吗？:)

在我的mapStateToProps函数中,我设置idToken和accessToken存储在状态中的值.这是有效的,因为我已经能够从组件中引用这些值.在mapDispatchToProps我尝试使用这些道具作为我的行动中的参数.但是,ownProps是一个空对象.为什么它不具备idToken和accessToken？

容器:

import { connect } from 'react-redux'
import { toggleAddQuestionModal, fetchFriends } from '../actions'
import AddQuestionButtonComponent from '../components/AddQuestionButton'

const mapStateToProps = (state) => {
  auth = state.auth
  return {
    idToken: auth.token.idToken,
    accessToken: auth.profile.identities[0].accessToken,
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    didPress: (idToken, accessToken) => {
      dispatch(toggleAddQuestionModal(true))
      dispatch(fetchFriends(ownProps.idToken, ownProps.accessToken))
    }
  }
}

AddQuestionButton = connect(
  mapStateToProps,
  mapDispatchToProps
)(AddQuestionButtonComponent)

export default AddQuestionButton

零件: …

我正在研究React&Redux项目.该项目过去常常使用webpack-dev-middleware和热中间件进行热重装.

在我将Redux Saga添加到项目中之后,将一些saga中间件添加到redux商店.似乎每当我更改传奇代码时,热重新加载都会破坏并显示错误消息:

提供商>不支持动态更改store.您很可能会看到此错误,因为您已更新到Redux 2.x和React Redux 2.x,它们不再自动热重新加载Reducer.有关迁移说明,请参阅https://github.com/reactjs/react-redux/releases/tag/v2.0.0.

我知道佐贺使用发电机并且它是时间依赖的.可以用Sagas热重新加载页面吗？就像Redux减速器在热重装过程中如何替换自身一样.

谢谢!

我坚持这一点,我无法进步 - 我想解决方案很简单,但我无法弄清楚.我正在尝试在reducer中添加条目,因此in in中的数据看起来像这样:

state = {
  entryId: {
    entryName: ["something", "something2", "something3" /* and so on... */]
  }
};

到目前为止,这是我得到的最接近的,但是,它不是添加新的唯一条目,而是替换已经存储的条目.此外,我需要能够将此项添加到空状态,其中entryId,entryName尚不存在以避免错误:

switch(type) {
  case ADD_ENTRY:
    return {
      ...state,
      [entryId]: {
        ...state[entryId],
        [entryName]: {
          [uniqueEntry]: true
        }
      }
    };
}

知道我做错了什么吗？

我在使用redux-form设置初始表单字段值时遇到了一些问题.

我正在使用redux-form v6.0.0-rc.3并对v15.3.0做出反应.

所以这是我的问题,我有一个用户网格,当点击用户行时,我正在导航到编辑用户页面并在网址中包含用户ID.然后在编辑用户页面上,我抓住id并调用fetchUser(this.props.params.id),这是一个返回this.state.users的动作创建者.然后,我试图通过调用以下方式设置表单初始值:

function mapStateToProps(state) {
    return { initialValues:  state.users.user }
}

根据我的理解,这应该将initialValues设置为state.users.user,并且每当更新此状态时,也应该更新initialValues.对我来说情况并非如此.InitialValues被设置为先前单击的用户行(即this.state.users.user的先前状态).所以我决定测试这个并向这个组件添加一个按钮,当它被点击时,我再次使用硬编码的用户ID调用fetchUser:

this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3');

这是正确更新状态,但initialValues的值不会更改.更新状态时不会更新.我在旧版本的redux-form上测试了这个完全相同的过程,它按预期工作.

我在这里做错了什么,或者这是我正在使用的版本的问题.

用户编辑表格 -

class UsersShowForm extends Component {

    componentWillMount() {
        this.props.fetchUser(this.props.params.id);
    }

    onSubmit(props){
        console.log('submitting');
    }

    changeUser() {
        this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3');
    }

    renderTextField(field) {
        return (
      <TextField 
        floatingLabelText={field.input.label}
        errorText={field.touched && field.error}
        fullWidth={true}
        {...field.input}
      />)
    }

    render() {
        const { handleSubmit, submitting, pristine } = this.props;

        return(

            <div>
                <form onSubmit={handleSubmit(this.onSubmit.bind(this))} className="mdl-cell mdl-cell--12-col">

                    <Field name="emailAddress" component={this.renderTextField} label="Email Address"/>

                    <Field name="firstName" component={this.renderTextField} label="First Name"/>

                    <Field name="lastName" component={this.renderTextField} label="Last Name"/>
                </form> …

我正在使用Renet和Redux在dotnet core 2.0之上构建SPA.不幸的是,vs2017模板不包括身份验证/授权.

在环顾四周时,我看到很多人都在谈论使用JWT并建议使用Identity Server或OpenIddict来处理这个问题,但我之前只使用过ASP.NET身份来处理安全性.

我的问题是,是否有可能通过ASP.NET单独使用身份确保反应应用程序,如果是这样,为什么这么多人直接跳到JWT作为保护SPA应用程序的解决方案？

基于令牌的身份验证是唯一适用于SPA应用程序的方法,还是我可以使用基于Cookie的身份验证？

我发现没有使用完成react-router-redux路由的唯一工作方法action creator async action是将historyprop从组件传递给action creator并执行:

history.push('routename');

由于BrowserRouter忽略了传递给它的历史道具,因此我们不能将自定义历史对象与browserhistory一起使用.

解决这个问题的最佳方法是什么？