小编Tom*_*Tom的帖子

我试图弄清楚为什么styled-component button当我点击a 时会重新渲染它，而在button没有样式时没有重新渲染。

我有一个函数组件，它呈现一个button带有styled-components. 当button被点击时，被触发的动作如预期，但风格button上的每次点击进行重新渲染，我可以从Chrome devtools一个新的看到class每次产生。

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Button = ({ onClickButton }) => {
  const WrappedButton = styled.button`
    background-color: #CCC;
    width: 2rem;
    height: 2rem;
  `;

    return (
      <WrappedButton 
        type="button"
        onClick={onClickButton} 
      />
    )
};

export default Button;

当按钮未设置样式时，将触发操作并且不会按预期重新渲染按钮：

return (
  <button 
    type="button"
    onClick={onClickButton} 
  />
)

在此先感谢您的帮助 ！

如何共享 redux 状态切片中的常见操作？

假设我想在多个切片中共享updateField下面定义的内容，而不是profile. 我应该从外部文件导入它吗？

我可以使用extraReducersfrom@redux/toolkit但然后我应该创建一个包含我的updateField操作的新切片，并且该操作没有自己的状态。它只使用导入的切片的状态。

import { createSlice } from '@reduxjs/toolkit';

export const INITIAL_STATE = { title: { value: '' } }

const slice = createSlice({
  name: 'profile',
  initialState: INITIAL_STATE,
  reducers: {

    updateField: (state, { payload: { name, value } }) => ({
      ...state,
      [name]: {
        ...state.data[name],
        value,
      },
    }),

  },
})

export const {
  updateField,
} = slice.actions

谢谢