Question

我正在使用react，redux和redux-saga。现在我想跟踪所有用户与表单的交互，例如onfocus时间戳，他输入的内容以及他提交的内容。我想要一个应该为我做上述所有事情的通用组件。这该怎么做。提前致谢

Answer 1

如果要跟踪因用户操作而触发的所有操作。用户提交表单时的示例。您想记录＆＃34; MY_FORM_ACTION / FORM_SUBMIT＆＃34;和＆＃34; MY_FORM_ACTION / FORM_SUBMIT_SUCCESS＆＃34;或＆＃34; MY_FORM_ACTION / FORM_SUBMIT_FAILURE＆＃34;同样。使用中间件。

您可以输入所有表单操作，例如＆＃34; MY_FORM_ACTION / ACTION_NAME＆＃34;

并编写一个简单的中间件，如下所示

const FormLogger = store => next => action => {
  if(action.type.includes('MY_FORM_ACTION/')){
  // log your action here 

}
   next(action)
}

然后在If条件下，您可以将它们发送到服务器或只记录它。该中间件将捕获具有＆＃34; MY_FORM_ACTION /＆＃34;的所有表单操作。将此中间件添加到您的redux中就像saga或thunk中间件一样，它会起作用！

否则您可以拥有如下所示的TracMe组件。

Const TrackMe = Component => props =>{  

const {onChange, onClick, onBlur, ...rest} = props;

const logChange = (e) =>{
//log Change 
if(onChange){onChange(e)
}

const logClick = (e) =>{
//log Click 
if(onClick){onClick(e)
}

const logBlur = (e) =>{
//log blur 
if(onBlur){onBlur(e)
}

return (<Component 
         onChange={logChange}
         onClick={logClick}
         onBlur={logBlur}
         {...rest}/>)
    }

现在，如果您的组件为<Input {…props } />，请使用TrackMe(<Input {…props } />

进行包装

Answer 2

我不同意这是一个完美的中间件用例。跟踪是用户交互的副作用，与redux无关，因为发送分析数据不会影响应用程序状态。

您可能需要某种HOC <TrackableInput>，其中包含onChange，onFocus等事件处理程序，并且每个处理程序触发分析请求，作为副作用，在发送INPUT_CHANGE_VALUE之类的动作之前。分离跟踪和管理应用程序状态的问题。

const trackFormEvent = (type, value = null) => {
    console.log('Track form event of type', type, 'with value:', value);
    // Do actual tracking request in here.
};

class TrackableInput extends React.Component {
    onChange = (changeEvent) => {
        const { value } = changeEvent.target;
        trackFormEvent('change', value);
        this.props.onChange(value);
    };

    onFocus = (focusEvent) => {
        trackFormEvent('focus');
        this.props.onFocus(focusEvent);
    };

    onBlur = (blurEvent) => {
        trackFormEvent('blur');
        this.props.onBlur(blurEvent);
    };

    render() {
        return (
            <input
                {...this.props}
                onChange={this.onChange}
                onFocus={this.onFocus}
                onBlur={this.onBlur}
            />
        );
    }
}

如何跟踪表单更改以响应分析

2 个答案: