react-redux#connect JavaScript Examples

XFormBuilder = connect((store, ownProps) => {
    const namespace = ownProps.namespace;
    if (typeof namespace === 'undefined' || namespace === '') {
        console.warn('xformBuilder:使用xformBuilder组件建议传入唯一性的namespace属性，否则会因为store数据共享导致问题');
    }
    return {
        xformBuilderData: store.xformBuilderData[namespace] || store.xformBuilderData
    };
})(contextWrapper(localeMessagesWrapper(APP)))

export default function RequireAuthentication(Component) {
  class Authentication extends React.Component {
    render() {
      return (
        <Route
          render={(props) => {
            return this.props.isAuthenticated ? (
              <Component {...props} />
            ) : (
              <Redirect
                to={{
                  pathname: "/login",
                  state: { from: props.location },
                }}
              />
            );
          }}
        />
      );
    }
  }

  Authentication.propTypes = {
    isAuthenticated: PropTypes.bool,
  };

  function mapStateToProps(state) {
    return {
      isAuthenticated: state.user.isAuthenticated,
    };
  }

  return withRouter(connect(mapStateToProps)(Authentication));
}

authenticatedRoute = (Component = null, options = {}) => {
  class AuthenticatedRoute extends React.Component {
    state = {
      loading: true,
    };

    componentDidMount() {
      if (this.props.isLoggedIn) {
        this.setState({ loading: false });
      } else {
        Router.push(
          options.pathAfterFailure ||
            settings?.routes?.authenticated?.pathAfterFailure
        );
      }
    }

    render() {
      const { loading } = this.state;

      if (loading) {
        return <div />;
      }

      return <Component {...this.props} />;
    }
  }

  return connect((state) => ({
    isLoggedIn: state?.authenticated && !!state?.user,
  }))(AuthenticatedRoute);
}

render() {
    const { pipe, details } = this.props;
    const nodeId = pipe.get('nodeId');
    const node = details.get(nodeId);
    const d = node && node.details;
    const titleBarColor = d && getNodeColorDark(d.rank, d.label, d.pseudo);
    const statusBarColor = d && brightenColor(titleBarColor);
    const title = d && d.label;

    // React unmount/remounts when key changes, this is important for cleaning up
    // the term.js and creating a new one for the new pipe.
    return (
      <div className="tour-step-anchor terminal-embedded">
        <div
          onTransitionEnd={this.handleTransitionEnd}
          className="terminal-animation-wrapper"
          style={{transform: this.getTransform()}}>
          <Terminal
            key={pipe.get('id')}
            pipe={pipe}
            connect={this.state.animated}
            titleBarColor={titleBarColor}
            statusBarColor={statusBarColor}
            title={title} />
        </div>
      </div>
    );
  }

export function withHashLink(WrappedComponent) {
  return connect(
    (state) => {
      return {
        hashlink: state.hashlink,
      };
    },
    { setHashLink, resetHashLink },
  )((props) => {
    return (
      <WrappedComponent
        {...props}
        setHashLink={props.setHashLink}
        resetHashLink={props.resetHashLink}
      />
    );
  });
}

export function requireAuthentication(Component) {
  return @connect(
    state => {
      return {
        isAuthenticated: state.user.isLogin
      };
    },
    {
      changeMenuItem
    }
  )
  class AuthenticatedComponent extends React.PureComponent {
    constructor(props) {
      super(props);
    }
    static propTypes = {
      isAuthenticated: PropTypes.bool,
      location: PropTypes.object,
      dispatch: PropTypes.func,
      history: PropTypes.object,
      changeMenuItem: PropTypes.func
    };
    componentWillMount() {
      this.checkAuth();
    }
    componentWillReceiveProps() {
      this.checkAuth();
    }
    checkAuth() {
      if (!this.props.isAuthenticated) {
        this.props.history.push('/');
        this.props.changeMenuItem('/');
      }
    }
    render() {
      return <div>{this.props.isAuthenticated ? <Component {...this.props} /> : null}</div>;
    }
  };
}

Cadastrapp = compose(
    connect((state) => ({
        enabled: state.controls && state.controls[CONTROL_NAME] && state.controls[CONTROL_NAME].enabled || false,
        dockStyle: mapLayoutValuesSelector(state, { right: true, height: true}, true),
        dockWidth: 550,
        withButton: false
    }), {
        open: () => toggleControl(CONTROL_NAME, "enabled", true),
        onClose: () => toggleControl(CONTROL_NAME, "enabled", false)
    }),
    // setup and teardown due to open/close
    compose(
        connect( () => ({}), {
            setUp
        }),
        init()
    )
)(Main)

export default function defaultConnect({actions, options}) {
    return function connectComponent(component) {
        const {
            mapStateToProps = () => ({}),
            mapDispatchToProps = (dispatch) => {
                const ac = bindActionCreators(actions, dispatch);
                Object.keys(actions).forEach(key => {
                    if (typeof actions[key] === 'object') {
                        ac[key] = bindActionCreators(actions[key], dispatch);
                    }
                });

                return {action: ac};
            },
            mergeProps,
            LayoutComponent,
        } = component;

        // 只要组件导出了mapStateToProps，就说明要与redux进行连接
        // 优先获取LayoutComponent，如果不存在，获取default
        if (mapStateToProps) {
            let com = LayoutComponent || component.default;
            if (!com) return component;
            return connect(
                mapStateToProps,
                mapDispatchToProps,
                mergeProps,
                options
            )(com);
        }
        return LayoutComponent || component.default || component; // 如果 component有多个导出，优先LayoutComponent，其次使用默认导出
    };
}

DeckEditor = connect(mapStateToProps, actions)(InnerDeckEditor)

Login = connect(mapLogin, mapDispatch)(AuthForm)

connected = connect(mapStateToProps)(AtmMenu)

withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
)

ConnectedComment = connect(null, mapDispatchToProps)(Comment)

ConnectedDashboard = AdminLTE
  ? connect(mapStateToProps, mapDispatchToProps)(AdminLTE)
  : null

connectStateAndProps = connect(
  mapStateToProps,
  mapDispatchToProps
)

COMPONENT_1_W = connect(mapStateToProps("Component_1"), mapDispatchToProps("Component_1"))(Component_1)

ConnectedTextInput = connect(
  null,
  mapDispatchToProps
)(TextInput)

SocketProviderMock = connect()(SocketProvider)

AppContainer = connect(mapStoreToProps, mapDispatchToProps)(App)

withConnect = connect(mapStateToProps, mapDispatchToProps)

export default function (ComposedComponent, UnauthedComponent) {
    class Authenticate extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                authState: 'loading'
            }
        }

        componentDidMount() {
            this._checkAndRedirect();
        }

        componentDidUpdate() {
            this._checkAndRedirect();
        }

        _checkAndRedirect() {
            if (this.state.authState === "loading") {
                Auth.currentAuthenticatedUser().then(user => {
                    this.props.auth(user);
                    this.setState({authState: 'valid'});
                }).catch(e => {
                    this.setState({authState: 'invalid'});
                    this.props.redirect();
                });
            }
        }

        render() {
            return this.state.authState === 'valid' ?
                <ComposedComponent {...this.props} /> : <UnauthedComponent {...this.props}/>;
        }
    }

    const mapStateToProps = (state) => {
        return {
            auth: state.auth
        };
    };

    const mapDispatchToProps = (dispatch) => {
        return {
            redirect: () => dispatch(() => {history.push("/login")}),
            auth: (user) => dispatch(AuthAction.auth(user))
        }
    };

    return connect(
        mapStateToProps,
        mapDispatchToProps
    )(Authenticate);
}

connectAlbum = connect(
  mapStateToProps,
  mapDispatchToProps
)

export function authData(configMapStateToProps = mapStateToProps) {
  return connect(configMapStateToProps, mapDispatchToProps);
}

AddTodo = connect()(AddTodo);