Question

我有一个用户列表，我希望在用户在文本字段中的字母类型中进行过滤。

在包含Input字段的Child组件中，我通过props传递输入：

 onEnter(event){
    console.log("ENTER")
   // console.log(event.target.value)
    this.props.filterEmployee(event.target.value);
}

在我的容器组件中，我取值

filterEmployee(val){
    console.log(val)
   // const allUser = this.props.allUser.allUserData;

   allUser .forEach(function(user){
       if(user.userNameLast.indexOf(val) != -1){
           console.log(user) //works
       }
    });
}

allUser是从 Redux-store 连接到Container Component的数据数组。

此数据还用于显示在componentWillMount上初始化的用户列表。

 render() {
    console.log("administration")
    console.log(this.props)

    const allUser = this.props.allUser.allUserData;


    return (
        <div id="employeeAdministration">
            <h1>Mitarbeiter Verwaltung</h1>
            <EmployeeAdministrationFilterList
                filterEmployee={this.filterEmployee.bind(this)}
            />
            {/* suchfeld - Name, Department mit checkbox*/}
            <ul>
                {allUser.length != 0 ? allUser.map(function (item, i) {
                    console.log(item)
                    return <li key={i}>
                        <UserCard
                            userData={item}
                            displayPersonalInfo={true}
                            showRequestDates={false}
                            showChangePassword={false}
                        />
                    </li>
                })
                    : ""
                }
            </ul>
        </div>
      )
    }
  }

现在的问题是，我不知道如何告诉<UserCard />数据已经改变。如何将函数中的数据传递给render()函数？

去这里的方式是什么？

编辑：

我也尝试通过减速机，但到目前为止它没有用。

 filterEmployee(val){
    console.log(val)
    const {dispatch} = this.props;
    dispatch(filterAllUser(val));
}

还原器（不起作用）

function allUser(state = {allUserData: []}, action){
switch (action.type){
    case 'REQUEST_ALL_USER':
        return Object.assign({}, state, {
            isFetching: true
        });
    case 'RECEIVE_ALL_USER':
        return Object.assign({}, state, {
            isFetching: false,
            allUserData: action.items
        });
    case 'FILTER_ALL_USER':
        return Object.assign({}, state, {
            allUserData: state.allUserData.filter(user => user.userNameLast !== action.filter )
        });
    default:
        return state
}
}

以下是代码如何将商店连接到组件

 EmployeeAdministration.PropTypes = {
   allUserData: PropTypes.array
  };

  const mapStateToProp = state => ({
     allUser: state.allUser
   });

   export default connect(mapStateToProp)(EmployeeAdministration)

尝试此操作时，结果为Console output of state object

Answer 1

此示例应该能够演示基本工作流程：JSFiddle。

基本上，Redux有一个one-way-dataflow。数据（此处为Users中的store）从根组件流向子组件。

每当您想要在任何组件中更改Users的值时，您都会为相应的Action创建dispatch和reducer操作。 reducer更新store并将其从上到下传递。

例如，您要过滤名称中包含"Jo"的所有用户：

动作创建者

将Action creators传递给组件。 action是一个普通对象，格式为{type: "FILTER_ALL_USERS", query: "Jo"}。这里的传球是第73行：

<Users users={this.props.users} actions={this.props.actions}></Users>

在组件Users内，我们可以致电this.props.actions.filter()创建action。

发送创建的动作

由action自动发送此redux，因为我们在第93行中有bindActionCreators：

// Map the action creator and dispatcher
const mapDispatchToProps = (dispatch) => {
  return {
    actions: Redux.bindActionCreators(userActions, dispatch),
    dispatch
  }
}

用于处理操作的Reducer

所有减速器都将被告知此操作，但是特定的一个将会处理它（基于其type），第20行：

case 'FILTER_ALL_USERS': 
  return allUsers.filter(user => user.name.toLowerCase().indexOf(action.query.toLowerCase()) >= 0)

重新呈现

reducer将返回一个全新的对象作为新的store，它将由Redux从组件的根目录传递。将调用子组件中的所有render函数。

根据子Component的输入过滤数据

1 个答案:

动作创建者

发送创建的动作

用于处理操作的Reducer

重新呈现