主页 / 问题 / 665077
Accepted
ravend
Asked:2020-05-12 21:14:21 +0000 UTC2020-05-12 21:14:21 +0000 UTC

如何用 redux 填充状态？

  • 772

必需的：

  • 从数据库中获取数据列表
  • 在客户端编辑它们
  • 将更改保存到数据库

通过 redux 获取数据

dispatch(fetch()...

但数据进入道具（这是只读的）

在哪里以及如何将它们正确地转移到状态，以便随后可以通过 setState 编辑它们？

//Component

class myComponent extends Component {
    ...
}

export default connect(
    state => ({
        items: state.items
    }),
    dispatch => ({
        onGetItems: () => {
            dispatch(getItems());
        }
    })
)(myComponent);
...
// Middleware
export const getItems = () => dispatch => {

    fetch(url, {
        ...
    })
    .then(function (data) {
        dispatch({ type: 'SUCCESS', data: data });
    })  
    .catch(function (error) {  
        console.log('Request failed', error);  
    });
}
...
// Reducer
const initialState = [];

export default function items(state = initialState, action) {
    if (action.type === 'SUCCESS') {
        return action.data;
    }
  return state;
}

UPDATE

表格的数据来自后面：

[
    {
        "id": 1,
        "name": "ivan",
        "value": 10
    }, {
        "id": 5,
        "name": "fred",
        "value": 3
    }, {
        "id": 25,
        "name": "dima",
        "value": 3
    }
]

例如我们想重命名fred为stas

reactjs

1 个回答

  1. Best Answer

    您不需要使用组件自身的状态来更改 Redux 存储中的内容，您可以直接通过操作更改存储本身。例如像这样：

        //Reducer
    export default function employees(state = [], action) {
      if (action.type === 'CHANGE_VALUE') {
         return state.map(person => {
             if(person !== action.id) return Object.assign({}, person);
             return Object.assign({}, person, {
                 [action.field]: action.value
             });
         });
      }
      return state;
    }

    //Action
    const changeFieldValue = (id, field, value) => ({
       type: 'CHANGE_VALUE',
       id,
       field,
       value,
    })

    const Inputs = ({
        inputs,
        onChange,
    }) => (
       <div>
            {inputs.map(input => 
              <input name={input.name} value={input.value} onChange={e => onChange(e)}
            )}
        </div>
    )

    const MyForm = ({
        employees,
        changeFieldValue
    }) => (
        <div>
            {employees.map(employee => 
              <Inputs key={employee.id} 
                      inputs={[
                         { name: 'name', value: empoyee.name },
                         { name: 'value', value: empoyee.value },
                      ]}
                      onChange={(e) => changeFieldValue(employee.id, e.target.name, e.target.value)}
               />
            )}
        </div>
    )

    export default connect(
        (state) => ({
            employees: state.employees
        }),
        {
            changeFieldValue
        }
    )(MyForm);
    • 2

相关问题