标签: redux

我正在尝试使用 store.dispatch(NameOftheReducer(data)) 更新减速器状态。

它调用 Action 创建者，但不更新减速器状态。我不想从我想要分派状态更改的位置创建任何 React 组件。有什么办法可以做到这一点..提前致谢

使用下面的react/redux设置：

索引.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/app';
import configureStore from './store';

let initialState = {
  foods: {
    apple: {
      selected: false,
      flavors: {
        sweet: true,
        salty: false
      }
    },
    potatoChips: {
      selected: false,
      flavors: {
        sweet: false,
        salty: true
      }
    }
  },
  drinks: {
    < some other object >
  }
}

let store = configureStore(initialState);

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

商店.js

import { …

  [HttpPost("xxxxxxxxxx")]
        [Authorize(Roles = "xxxxxxxxx")] 
        public IActionResult Post([FromBody]xxxxxxx xxxxxxxxxxxxxx)
        { 
            if (s == null)
            {

            }

        }

上面的代码是属性Authorize(Roles ="Director")。我的申请角色是学生、总监、经理。这个特定的方法只能由主管访问，并且对于上述方法它给我返回 401 未经授权。

export function xxxxxxxxxxxx(token, formValues) {

        return axios.post(`${ROOT_URL}/xxxxxxx/xxxxxxxx`, formValues);

    }
}

我不确定如何通过 axios 调用在标头中发送不记名令牌。

在我的商店中，我有一个具有以下形状的状态：{posts: [{...},{...}]}，但是当我mapStateToProps()在 Home.js 中使用时，状态返回{posts: []}，带有一个空数组（商店状态中曾经有一个数组）。

我是否使用mapStateToProps()不正确或者问题是否源于 Redux 周期的其他部分？

我正在使用的 API fetch，暂时位于 actions.js 中

// api

const API = "http://localhost:3001"

let token = localStorage.token
if (!token) {
    token = localStorage.token = Math.random().toString(36).substr(-8)
}

const headers = {
    'Accept': 'application/json',
    'Authorization': token
}

// gets all posts
const getAllPosts = token => (
    fetch(`${API}/posts`, { method: 'GET', headers })
);

动作和动作创建者，使用 thunk 中间件：

// actions.js

export const REQUEST_POSTS = 'REQUEST_POSTS';
function requestPosts (posts) { …

过去我就是Object.assign()这样使用和完成的，但最近我被告知要使用扩展运算符。我想知道这是否是正确的做法，或者这是否会改变状态？

import constants from '../constants';

const initialState = {
  all: null
};

export default (state = initialState, action) => {
  switch (action.type) {
    case 'ITEM_ADDED':
      return { ...state, all: state.all.push(action.data) };
    default:
      return { ...state };
  }
};

我正在尝试将 redux 字段输入的第一个字母大写。这是我的代码

const renderField = ({input, className, label, type, meta: {error, touched, submitFailed}}) => {

  return (<div>
    <div>
      <input {...input}
             className={className + ' ' + classNames(submitFailed && ((error && 'empty_field empty_placeholder')))}
             placeholder={label} id={label} type={type}/>
     </div>
  </div>)

};

const SignUp = ({handleSubmit, emailSignUp, signUpStatus}) => {

  return (

       <form onSubmit={handleSubmit(emailSignUp)}>
           <div className="width_100">
                <div className="float_left text_align_left landing_name_cont">
                    <Field
                      className="landing_input"
                      name="signUpFirstName"
                      type="text"
                      maxLength={5}
                      component={renderField}
                      label="First name"
                      validate={[required]}
                    />
              </div>

       </form>

  )
};

export default reduxForm({
  form: 'signUp'
})(SignUp)

当有一个普通的输入字段但缺少 redux 字段的示例时，有很多示例可以执行此操作。如何将 redux …

所以我正在手机上查看我的网站。我通过输入主机的 IP 地址和网站所在的端口来完成此操作。但是，当我尝试在手机上查看该网站时，出现错误 TypeError：无法读取未定义的属性“应用”。当我在计算机上查看该网站时，不会出现此错误。我不确定为什么会收到此错误，并且我不确定要发布代码的哪一部分，因为我不知道错误来自哪里。我使用 NodeJS 和 ExpressJS 作为后台。我在前端使用 ReactJS 和 Redux。任何帮助表示赞赏！如果需要任何澄清，请告诉我。

在假设的应用程序中，用户可以创建一本书，默认情况下该书有 3 页。添加书籍和页面后，我想对书籍和页面做一些其他事情。Books 和 Pages 是我的 redux 存储中的两个独立的缩减器，也是我的数据库中的两个表。我目前的流程是这样的：

1. 用户创建新书。
2. 调用 ADD_BOOK_REQUEST 操作
3. 调用 ADD_PAGES_REQUEST 操作
4. 书籍被添加到数据库中，并触发 ADD_BOOK_SUCCESS
5. 将页面添加到触发 ADD_PAGES_SUCCESS 的数据库

如上所述，在执行步骤 4 和 5 后，我想对这本书做一些其他事情，但我不确定最好的方法。为了让它现在运行，目前我有一个 setTimeout 函数，它运行检查新书和具有该 bookId 的 3 页。如果书和3页在商店里，则做其他事情，如果没有，则再次运行超时。我非常确定这不是最好的方法。：微笑：

这里是一个 redux noob。

在这部分的redux 教程中，特别是为什么他们没有做这样的事情

        case 'todos/todoToggled': {
            return {
                ...state,
                todos: state.todos.map(todo => {
                    if (todo.id === action.payload.todoId) {
                        todo.completed = !todo.completed
                    }
                    return todo
                }
                )
            }

据我所知map()，Mozilla 文档中没有引用任何副作用

map() 方法创建一个新数组，其中填充了对调用数组中的每个元素调用提供的函数的结果。

他们为什么要做这个额外的步骤？

          // We've found the todo that has to change. Return a copy:
          return {
            ...todo,
            // Flip the completed flag
            completed: !todo.completed
          }

会影响功能吗？或者他们只是想保持一致？

现在我已经有了这些用于上传 thunk 生命周期的操作。

type UPLOAD_START   = PayloadAction<void>
type UPLOAD_SUCCESS = PayloadAction<{ src: string, sizeKb: number }> 
type UPLOAD_FAILURE = PayloadAction<{ error: string }>

我想将它转换为createAsyncThunk调用，假设它会减少代码。但是会吗？

从https://redux-toolkit.js.org/api/createAsyncThunk上的示例来看，它应该是这样的：

const uploadThumbnail = createAsyncThunk(
  'mySlice/uploadThumbnail',
  async (file: File, thunkAPI) => {
    const response = await uploadAPI.upload(file) as API_RESPONSE
    return response.data   // IS THIS THE payload FOR THE fulfilled ACTION ?
  }
)

这是我将如何处理生命周期操作？

const usersSlice = createSlice({
  name: 'mySlice',
  initialState: // SOME INITIAL STATE,
  reducers: {
    // standard reducer logic, with …