react-redux반응이 빨라지기 시작하기


비고

Reux Redux는 Redux에 대한 React 바인딩을 제공하는 라이브러리입니다.

Redux 저장소를 인식하는 실제 구성 요소를 "컨테이너", "스마트 구성 요소"또는 "고위 주문 구성 요소"(HOC)라고합니다. 이러한 구성 요소는 Redux를 사용하기 위해 다음을 수행해야합니다.

  • 저장소에 가입하여 Redux 저장소에서 업데이트를 얻으십시오.
  • 파견 활동

손으로 이렇게하면 사용을 암시 store.subscribestore.dispatch(action) 컨테이너 반응에.

Reux Redux는 connect 기능을 통해 Redux 저장소와 React 컨테이너 구성 요소 사이의 바인딩을 단순화합니다.이 connect 함수는 Redux 상태 속성과 작업 작성자를 구성 요소의 소품에 매핑합니다.

connect 는 상위 구성 요소를 만드는 함수입니다. Connect는 3 가지 함수 ( mapStateToProps , mapDispatchToProps , mergeProps )를 mergeProps 원래의 구성 요소를 래핑하여 "연결된"구성 요소로 만드는 컨테이너 구성 요소를 반환합니다.

import { connect } from 'react-redux';

const Customers = { ... };
const mapStateToProps = (state) => { ... }
const mapDispatchToProps = (dispatch) => { ... }

export default connect(mapStateToProps, mapDispatchToProps)(Customers);

전체 예제는 예제 섹션을 참조하십시오.

모든 컨테이너 구성 요소가 Redux 저장소에 액세스해야하므로 저장소를 모든 하위 구성 요소에 전달하는 React Redux의 특수한 <Provider> 구성 요소를 사용하는 것이 좋습니다 (내부적으로 React 컨텍스트 사용).

공식 문서 : http://redux.js.org/docs/basics/UsageWithReact.html

GitHub 레포 : https://github.com/reactjs/react-redux

버전

번역 출시일
5.0.3 2017-02-23
5.0.2 2017-01-11
5.0.1 2016-12-14
5.0.0 2016-12-14
4.4.6 2016-11-14
4.4.5 2016-04-14
4.4.4 2016-04-13
4.4.3 2016-04-12
4.4.0 2016-02-06
4.3.0 2016-02-05
4.2.0 2016-02-01
4.1.0 2016-01-28
4.0.0 2015-10-15
3.0.0 2015-09-24
2.0.0 2015-09-01
1.0.0 2015-08-24
0.5.0 2015-08-07
0.1.0 2015-07-12

전체 예제

"Customers"벙어리 구성 요소를 Redux 저장소에 연결하는 컨테이너 "CustomersContainer"가 있다고 가정합니다.

index.js에서 :

import { Component }, React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './redux/rootReducer';
import CustomersContainer from './containers/CustomersContainer';

let store = createStore(rootReducer);

render(
  <Provider store={store}>
    <CustomersContainer />
  </Provider>,
  document.getElementById('root')
);
 

CustomersContainer에서 :

import React, { Component } from 'react';
import { connect } from 'react-redux';

// Import action creators
import { fetchCustomers } from '../redux/actions';

// Import dumb component
import Customers from '../components/Customers';

// ES6 class declaration
class CustomersContainer extends Component {
  componentWillMount() {
    // Action fetchCustomers mapped to prop fetchCustomers
    this.props.fetchCustomers();
  }

  render() {
    return <Customers customers={this.props.customers} />;
  }
}

function mapStateToProps(state) {
  return {
    customers: state.customers
  };
}

// Here we use the shorthand notation for mapDispatchToProps
// it can be used when the props and action creators have the same name 
const CustomersContainer = connect(mapStateToProps, { fetchCustomers })(CustomersContainer);

export default CustomersContainer;
 

React Redux를 사용하는 Hello World

이 가이드는 귀하가 이미 react , redux , react-routerreact-redux 했고 react , reduxreact-router 구성했다고 가정 react-router . 그렇지 않은 경우, 그렇게하십시오.

참고 : react-routerreact-redux 의 의존성이 아니지만, 라우팅을 위해 반응 응용 프로그램에서 사용할 가능성이 높습니다. 따라서 반응 지연 기능을 사용하는 것이 매우 쉽습니다.


파일명 : app.js

'use strict';

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';
import { Provider } from 'react-redux';
import store from './stores';

render(
  (
    <Provider store={ store }>
      <Router history={ browserHistory }>
        {/* all the routes here */}
      </Router>
    </Provider>
  ),
  document.getElementById('app')
);
 

이 파일은 대부분의 사람들에게 의미가 있습니다. 여기서 우리가하는 일은 ./stores 에서 저장소를 가져 ./stores react-redux 제공하는 Higher Order Component Provider 사용하여 모든 경로에 전달하는 것입니다.

이렇게하면 매장 전체에서 사용할 수 있습니다.


이제이 시나리오를 살펴 보겠습니다 . 우리는 user 감속기에서 데이터를 가져 오는 구성 요소 인 UserComponent 를 가지고 있으며 클릭하면 클릭하면 상점의 데이터가 업데이트됩니다.

신청 구조

우리의 rootReducer 에는 user 감소 rootReducer 있습니다.

const rootReducer = combineReducers({
    user: userReducer,
})
export default rootReducer;
 

userReducer 는 다음과 같습니다.

const default_state = {
  users: [],
  current_user: {
    name: 'John Doe',
    email: 'john.doe@gmail.com',
    gender: 'Male'
  },
  etc: {}
};

function userReducer( state=default_state, action ) {

  if ( action.type === "UPDATE_CURRENT_USER_DATA" ) {
    return Object.assign( {}, state, { current_user: Object.assign( {}, state.current_user, { [action.payload.field]: action.payload.value } ) } );
  }
  else {
    return state;
  }

}

export default userReducer;
 

우리의 actions 파일은 다음과 같습니다.

export function updateCurrentUserData( data ) {
  return {
    type: "UPDATE_CURRENT_USER_DATA",
    payload: data
  }
}
 

마지막으로, 우리 구성 요소에 대해 연구 해 보겠습니다.

파일 이름 : UserComponent.js

'use strict';

import React from 'react';
import { connect } from 'react-redux';
import * as Action from './actions';

let UserComponent = (props) => {

  let changeUserDetails = (field, value) => {
    // do nothing
  }

  return(
    <div>
      <h1>Hello { props.current_user.name }</h1>
      <p>Your email address is { props.current_user.email }</p>
      <div style={{ marginTop: 30 }}>
        <button onClick={ () => { changeUserDetails('name', 'Jame Smith') } }>Change Name</button>
        <button onClick={ () => { changeUserDetails('email', 'jane@gmail.com') } }>Change Email Address</button>
      </div>
    </div>
  )

}

export default UserComponent;
 

물론이 기능 은 작동하지 않을 것 입니다. 아직 상점에 연결하지 않았기 때문입니다.

궁금한 점이 있다면, 우리가 redux 사용하고 있으며 구성 요소에 내부 상태가 필요하지 않기 때문에 무국적 기능 구성 요소입니다. 이것이 바로 사용 시간입니다.

react-redux 가 제공하는 connect 메소드는 세 개의 매개 변수를 취합니다.

mapStateToProps , mapDispatchToPropsComponent 자체.

connect( mapStateToProps, mapDispatchToProps )(Component)


mapStateToPropsmapDispatchToProps 와 함께 구성 요소 UserComponent 에 대한 연결 을 추가해 봅시다.

그리고의는 또한 우리의 changeUserDetails 기능, 소위 때, 그것은 것 업데이트 할 수 있도록 dispatch action 우리에게 reducers 저장소가 업데이트되면, 우리의 감속기는 킥과 상점을 변경합니다 행동의 유형에 따라, 그리고 react-redux 다시한다 새로운 데이터로 구성 요소를 렌더링합니다.

복잡한 것 같니? 정말로 그렇지 않습니다.

UserComponent.js 는 다음과 같습니다.

'use strict';

import React from 'react';
import { connect } from 'react-redux';
import * as Action from './actions';

const mapStateToProps = ( state, ownProps ) => {
  return {
    current_user: state.user.current_user,
  }
}

const mapDispatchToProps = ( dispatch, ownProps ) => {
  return {
    updateCurrentUserData: (payload) => dispatch( Action.updateCurrentUserData(payload) ),
  }
}


let UserComponent = (props) => {

  let changeUserDetails = (field, value) => {
    props.updateCurrentUserData({ field: field, value: value });
  }

  return(
    <div>
      <h1>Hello { props.current_user.name }</h1>
      <p>Your email address is { props.current_user.email }</p>
      <div style={{ marginTop: 30 }}>
        <button onClick={ () => { changeUserDetails('name', 'Jame Smith') } }>Change Name</button>
        <button onClick={ () => { changeUserDetails('email', 'jane@gmail.com') } }>Change Email Address</button>
      </div>
    </div>
  )

}

const ConnectedUserComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(UserComponent)

export default ConnectedUserComponent;
 

여기에서 우리가 한 일이 추가되었습니다.

  • mapStateToProps이 저장하고 데이터 변경의 데이터를 얻을 수있게 해준다는 우리의 구성 요소는 새 데이터로 다시 렌더링됩니다.

    구성 요소 가 요청하는 데이터가 상점에서 변경되고 상점의 다른 데이터가 변경된 경우가 아니라면 구성 요소가 다시 렌더링됩니다.

  • mapDispatchToProps : 이것은 우리 구성 요소 (모든 구성 요소 일 수 있음)의 모든 감속기에 dispatch actions전달할 수있게합니다. dispatch actions type 에 따라 userReducer가 업데이트되어 업데이트 된 데이터로 새로운 상태를 반환합니다.

  • ConnectedUserComponent : 마지막으로 모든 매개 변수를 전달하여 connect 메소드를 사용하여 저장소에 connect 하고 연결된 구성 요소를 exported 습니다.

  • 우리는 또한 changeUserDetails 함수를 업데이트하여 소품에서 method 를 호출하고 데이터도 전달합니다. 그리고 props 은 우리가 호출 한 메소드를 모든 감속기에 전달합니다.


노트:

  • 우리가 감속기에서 새로운 상태를 반환하지 않으면, react-redux 우리의 구성 요소를 다시 렌더링하지 않을 것입니다.

설치 또는 설정

react 과 함께 redux 직접 사용하는 것은 어려울 수 있습니다. 저장소 변경시 업데이트하려는 모든 component 요소에 대해서는 해당 구성 요소를 redux store 구독해야합니다

Reactux 는 이러한 모든 작업을 처리하고 redux store 에서 필요한 데이터를 요청할 수있는 구성 요소를 작성하고 해당 데이터가 변경 될 때만 알립니다. 이렇게하면 정말 효과적인 구성 요소를 작성할 수 있습니다.

react-redux 를 설치하려면이 npm 명령을 실행하십시오.

npm install --save react-redux
 

그리고 너 끝났어.


참고 : Reux는에 의존합니다.

  • React (버전 0.14 이상) 및
  • Redux