react-redux의 입문편

react-redux는reactjs의 파생 플러그인으로 간단한 응용 프로그램에서state,props,context 등을 사용하면 해결할 수 있다.일단 업무 논리가 복잡할 때 시스템이 복잡한 상황에서 이 세 형제를 이용하여 개발하면 코드가 매우 복잡하고 비대해지며 유지 보수가 어려워 보인다.react-redux의 출현은 특히 필요하다. 시스템 업무 논리와 전단 ui 코드를 분리하고 함수식 프로그래밍을 사용하여 유지보수를 편리하게 할 수 있다. 비교적 가벼운 다리로 도입하여 코드를 더욱 유지보수성을 가지게 하고 복잡한 업무 논리 앞에서도 매우 가벼워 보인다. 물론 이 물건은 어느 정도 복잡도를 가지고 손에 넣기 어렵고 설정해야 할 것이 비교적 많기 때문에 이 물건에 대해많이 연습하고 많이 봐야지.
react-redux는reactjs 상태 관리 도구로 입문하려면 반드시 먼저 파악해야 하는 핵심 사상을 따라reactjs의 단방향 데이터 흐름의 사고 방식을 엄격히 따랐다.
너는 우선 레드ux 안에 도대체 어떤 것들이 있는지 알아야 한다.
1.state: 이 녀석은 그 기초 삼형제의 중state와 차이가 있다.api에서state는 setState에 따라 ui시도를 변경할 수 있다.dom 데이터의 변화는 모두 그것을 완성해야 한다.레드ux에 있는state는store 대상에 저장됩니다.변하려면 액션이 변하는지 안 변하는지 물어봐야 한다.체크 아웃:store.getstate();
2. action: 개체({});"내 체내에는 두 가지 속성이 있는데 하나는 type 속성이고 하나는payload(유일하지 않은) 속성이다. type을 통해 이 방법을 사용했는지 검증해야 한다.payload는 무엇을 표현해야 하는지,payload를 통해 사라지게 하고 싶다는 명령을 전달해야 한다."
2.reducer:방법(Function);'나의 체내에서 너는 네가 완성하고자 하는 각종 소동을 완성할 수 있다'고 말한다.
코드는 다음과 같습니다.

const counter=(state =0, action) =>{
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

3.store: 얘는 하는 일이 많아요. 얘는 큰 머리에 속하고 앞에 세 개는 준비 작업에 속하기 때문에 처리를 시작해야 해요.그것은 어떤 일을 하는지, 아래와 같다(발췌 홈페이지).
3.1state 응용 유지
3.2 제공getState()방법으로state 획득하기;
3.3 통과subscribe(listener)감청기 등록;
3.4 subscribe(listener)를 통해 되돌아오는 함수 취소 감청기.
'나는 가장 힘든 일을 하고 가장 많은 일을 하고 가장 적은 월급을 받고 명리를 모두 그 세 녀석이 가져갔어. 나 안 할래. 사장님, 나 월급 올려야 돼!!!우우우......;
전체 단계:
store를 호출합니다.dispatch(action) ( ， )  =>  Redux store에서 전송된 Reducer 함수를 호출합니다 (찾았습니다, 형제, 서두르지 마십시오. 처리해야 합니다)
=> 루트 Reducer는 여러 개의 하위 Reducer 출력을 단일state 트리로 통합해야 합니다. (모든 데이터를 병합해야 합니다. 형제, 잠시만요. state에 놓을게요.)
=> Redux store는 루트 Reducer가 되돌아오는 온전한 state 트리를 저장합니다 (형제, 데이터는 이미 state에 넣었으니 가져가세요)
이것은 완전한readux 데이터 흐름 모델로 이 사고는 매우 중요하다.다음에 나는 코드로 당신들을 위해 어떻게 한 걸음 한 걸음 이 소동을 완성하는지 공유할 것입니다.
1단계: action 준비(action.js):

function add(payload) {
    return { type: 'ADD', payload }
  }

  function min(payload){
      return{ type:'min',payload}
  }
  export {add,min}

2단계: Reducer 준비, 논리를 시작하겠습니다(reducer.js,combineReducers라는 방법으로 처리):

import { combineReducers } from 'redux'

const defaultState = 0;
const reducer = (state = 0, action) => {
  //console.log(action);
  switch (action.type) {
    case 'ADD':
      //return state.concat([action.text]);
      return state+action.text; 
    case 'min':
      return  state-action.text;
    default: 
      return state;
  }
};

export default combineReducers({
  //reducer:combineReducers({reducer}),
  reducer:combineReducers({reducer})
})

ps:combineReducers를 이용하여 대상 삽입 표현을 진행한다.
세 번째 단계:store 준비, 나는 그 두 녀석을 집중적으로 처리할 거야. 아니야, 너희들은 아무것도 할 수 없어(store.js):

import reducer from './reducer'
import { createStore,applyMiddleware  } from 'redux';
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
const loggerMiddleware = createLogger();
const configureStore = (preloadedState) => {
  return createStore(
   	reducer,
    preloadedState,
    applyMiddleware(
      thunkMiddleware,
      loggerMiddleware
    )
  )
}

export default configureStore();

ps:logger 플러그인 인쇄 로그를 디버깅하여 자신의 항목에 따라 도입할 수 있습니다.
이 일들은 모두 준비가 되었습니다. 저는 당신들을 저의react 응용 프로그램에 도입할 것입니다. 마음의 준비를 잘 해야 합니다. 단번에 멍해지지 마세요. 저는 책임지지 않습니다.
먼저 전역적인store를 제공해야 하기 때문에 app/index.jsx

import {Provider} from 'react-redux';
import store from 'Component/tool/store'；




render() {//render  ；
  	  const history = createHistory()
      return(
              
                  
              
            )
    //return()
  }

이어서 나는 실현했다. (login.jsx)

import {connect} from 'react-redux';
import {add,min} from 'Component/tool/action';


//       this.props.add(1)    ， this.props.reducer    
...

const mapStateToProps = (state) =>({reducer: state.reducer.reducer, counter: state.counter})

const mapDispatchToProps = (dispatch) =>{
  return{
    add:payload=>{dispatch(add(payload))},
    min:payload=>{dispatch(min(payload))}
  }
   
}


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

이렇게 완전한 레드ux 설정이 완성되었는데 겁먹은 사람이 있습니다. 여러분들이 많은 평론을 하고 서로 교류하며 저에게 잘못을 지적해 주신 것을 환영합니다.
다음 편에서는 레드스-actions-----------------react-redux의 승급 레드스-actions라는 책을 여러분께 공유할 예정입니다.
참조 문서:https://www.redux.org.cn/docs/basics/DataFlow.html;